CSS Grid'de repeat fonksiyonu
Aynı boyutta birkaç sütununuz varsa,
yazımı kolaylaştırmak için
repeat fonksiyonunu kullanabilirsiniz.
Bu fonksiyonun ilk parametresine sütun sayısı,
ikinci parametresine ise genişlikleri yazılır.
Haydi örneklerle bunun nasıl çalıştığını görelim.
Örnek
Diyelim ki aynı boyutta üç sütunumuz var:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Yazımı repeat ile kolaylaştıralım:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Örnek
Diyelim ki aynı boyutta üç sütunumuz var, dördüncü sütun ise farklı bir boyutta:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Yazımı repeat ile kolaylaştıralım:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Örnek
Diyelim ki ilk üç sütun bir boyutta, ikinci üç sütun ise başka bir boyutta:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Yazımı repeat ile kolaylaştıralım:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Örnek
Diyelim ki ilk üç sütun bir boyutta, sonra bir sütun daha var, ardından başka bir boyutta üç sütun daha var:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Yazımı repeat ile kolaylaştıralım:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Örnek
Bu kolaylaştırma tüm boyut birimleri için çalışır. Örnek olarak, piksel cinsinden üç sütunumuz olsun:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Yazımı repeat ile kolaylaştıralım:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Pratik Görevler
repeat kullanarak aynı boyutta
4 sütun yapın.
4 sütunu 100px boyutunda,
ve 3 sütunu 2fr boyutunda yapın.
2 sütunu 100px boyutunda,
3 sütunu 200px boyutunda,
sonra bir sütunu 1fr boyutunda,
ve son olarak 2 sütunu
10% boyutunda yapın.
