Sütunlarımıza veya satırlarımıza repeat kodunu ekleyerek hepsini veya bir bölümünü tekrarlatabiliriz.
Daha önce 1fr 1fr 1fr şeklinde girdiğimiz sütun kodumuzu aşağıda ki şekilde değiştirerek 1fr birimini 3 kez tekrarlatmış olacağız.
Böylece; tekrarlama işlevine iletilen ilk değer olan 3 değeri, birim kesirimizin kaç kez tekrarlanmasını istediğimizi belirtmektedir.
İkinci değer olan 1fr ise tekrarlatmak istediğimiz kesir birimini göstermektedir. Tekrarlatmak istediğimiz birim birden fazla da olabilmektedir.
Aşağıda birinci container satırında ki 1fr 1fr 1fr kodunu, altında ki container satırında repeat özelliği ile 1fr sütununu 3 kez repeat ediyoruz. Sonuç da görüntüde bir değişiklik olmamaktadır.
.container {
display:grid;
grid-template-columns: 1fr 1fr 1fr ;
grid-gap:1em;
}
- Tekrarlama İşlevi -
.container {
display:grid;
grid-template-columns: repeat (3, 1fr) ;
grid-gap:1em;
}
Repeat (tekrarlama) işlemi toplam sütunumuzun bir kısmı için kullanılabilir. Aşağıda ki örnekte; ilk önce 70px bir sütun, ardından 1fr birimin 6 kez repeat eden bölümü ve son olarak da 20px lik sütun içeren bir bölüm görülmektedir.
.container {
display:grid;
grid-template-columns: 70px repeat (6, 1fr) 20px ;
grid-gap:1em;
}
Codepen görüntüsü aşağıda ki gibidir.
Izgaramızı oluştururken satır (grid-template-rows) ve sütun özellikleriyle tanımlarız. Grid-temlate-columns kodu ile sütunlarımızı oluştururken, yatay olarak sütun satır izlerimiz de oluşmaktadır. Grid-temlate-rows kodu ile de dikey olarak satırlarımız oluşmaktadır.
Ayrıca, grid-auto-rows ve grid-auto-columns özellikleri ile oluşturulan parçalar varsayılan olarak otomatik olarak boyutlandırılır. Sütun ve satırlar içeriğe bağlı olarak boyutlandırıldığı gibi içerikten ayrı olarak, sütun ve satırlara boyut tanımlayabiliriz.
Aşağıda ki örnekte grid-auto-rows kodu ile satır ve sütunlarımızın 150px yüksekliğinde oluşmasını sağlamış bulunuyoruz.
Bir grid düzeninde satırlara ve sütunlara boyut tanımlarken minumum boyut tanımlayabilir ve eklenen içeriğe uygun olarak genişlemesini sağlayabiliriz.
Örnek vermek gerekirse; grid-auto-rows kodu ile satırlarımın 100px den fazla daraltılmamasını istiyorum, ancak sütunda ki içeriğim 300px yüksekliğe uzanıyorsa, satırın bu yüksekliğe uzamasını istiyorum.
Böyle bir örnek; grid-auto-rows ile minmax() kodunu kullanarak otomatik olarak oluşturulan satırların minimum ve maksimum 100px yüksekliğinde olacağı anlamına gelir. Grid, minmax() fonksiyonu ile sütunda ki boyutun içerik boyutuna bakarak ve bu satırda ki bir hücrede ki en uzun öğeye yer açmak için uzayacağı anlamına gelmektedir.
Görüntümüz aşağıda ki gibi minumum boyut ( 2. ve 3. satırlar ) 100px dir, ancak maksimum boyut (birinci satır) 2. sütunda ki içeriğin sığması için içeriğe uygun olarak genişlemiştir. Genişleme satır boyunca gerçekleşmiştir.
Bazen de gridi containere sığacak kadar sütun oluşturmasını isteyebiliriz. Bunu grid-temlate-columns kodunu kullanarak rakam yerine repeat otomatik doldur ( repeat(auto-fill) ) kodu ile ve ikinci parametre olarak da minmax() ile sütun boyutu ve sütunu belirtiriz.
Aşağıda ki kodun sütun minmax değerini her seferinde değiştirerek deneyebilirsiniz..
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
}
}
Görüldüğü gibi container kapsayıcıya sığacak kadar 150px sütun oluşmuş ve sonra da tüm sütunlar arasında kalan boşluk doldurulmuştur.
Devam edecek...
0 Comments
Yorum Gönder