grid-template-columns Özelliği
grid-template-columns özelliği,
bir grid öğesinin kaplayacağı sütunların
sayısını ve genişliğini belirler.
Bu özellik ebeveyn öğede belirtilir
ve alt öğelerin sütun genişliklerini tanımlar.
Özelliğin değeri olarak sütun genişliklerini
herhangi bir boyut biriminde
belirtebiliriz.
Özelliklerde piksel cinsinden değerler belirtirsek
sütun boyutları tam olarak buna karşılık gelecektir.
auto kelimesini belirtirsek, sütunlar
tüm mevcut alanı dolduracaktır.
fr (fraksiyon) biriminin kullanımı,
tüm alanın eşit parçalara bölüneceği anlamına gelir.
fr biriminin avantajı, farklı konteynerlere
veya ekran çözünürlüklerine uyum sağlayabilmesidir,
çünkü fr, piksel cinsinden kesin bir boyuta
bağlı kalmadan belirtilen fraksiyon sayısına göre böler.
Sözdizimi
seçici {
grid-template-columns: sütun genişliği;
}
Örnek
Grid'deki öğelerimiz için sütun genişliklerini belirleyelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Birinci ve üçüncü sütunlara piksel cinsinden sabit genişlik verelim, ikinci sütun ise mevcut alanı otomatik olarak doldursun:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi grid-template-columns özelliğini
kullanarak birinci ve ikinci sütunların konteynerin
bir kısmını, üçüncü sütunun ise üç kısmını kaplamasını sağlayalım:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
fr biriminde belirtilen değerler
kesirli olabilir. Önceki örneği değiştirerek
ikinci ve üçüncü sütunun genişliğini
kesirli sayılarla belirtelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
grid-template-columns özelliğinde
repeat() fonksiyonunu kullanalım,
bu fonksiyon konteynere üç sütunun da
aynı genişliğe sahip olması gerektiğini bildirir:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi önceki örneği, üç eşit sütuna konteynerin iki fraksiyonunu kaplayacak dördüncü bir sütun ekleyecek şekilde değiştirelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
İlk iki sütuna konteynerin bir fraksiyonu genişlik verelim, son iki sütuna ise iki fraksiyon genişlik verelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi sütun genişliklerini repeat() fonksiyonu
ve serbest fr birimlerini birleştirerek belirleyelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Ayrıca repeat() fonksiyonunda
auto-fill değeri kullanılabilir,
bu değer konteynerimizi istediğimiz genişlikte
aynı sütunlarla dolduracaktır:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
auto-fill ile birlikte minmax
fonksiyonunu kullanmak oldukça kullanışlıdır,
bu fonksiyon sütun genişlikleri için minimum
ve maksimum değer aralığı belirler.
Konteyner genişliği tüm sütunları sığdırmazsa,
bazıları yeni bir satıra taşınır, bu arada
satırdaki sütunlar satır içinde eşit şekilde dağılır.
Önceki örneği, içinde minmax fonksiyonunu
belirterek değiştirelim.
Sütun yerleşiminin farklı varyasyonlarını görmek için
tarayıcınızın sayfa genişliğini değiştirin:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi auto-fit özelliğini belirtelim,
auto-fill'den farkı, sütun sayısını
mevcut konteyner genişliğine uyarlayarak
onları genişletmesi veya daraltmasıdır:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Ayrıca fr birimiyle birlikte
% cinsinden değerler de kullanılabilir,
bu değerler de sütunun konteynerin hangi kısmını
kaplayacağını belirler.
Bu durumda önce % cinsinden sütun boyutu
hesaplanır, kalan boş alan ise fraksiyonlara bölünür:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
grid-template-columns ve
grid-template-rows
özelliklerini birlikte kullanalım:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
grid-template-columns ve
grid-template-rows
özelliklerini kullanarak üç sırada yer alan
dokuz hücreli bir tablo oluşturalım.
İkinci ve üçüncü sıralar aynı genişliğe sahip olacak,
her sütun ise farklı genişlikte olacak:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi önceki örnekteki tabloda üst sırayı iki fraksiyon genişliğinde, ilk sütunu ise yarım fraksiyon genişliğinde yapalım:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ayrıca Bakınız
-
grid-template-rowsözelliği,
grid'de satır sayısını ve genişliğini belirler -
grid-auto-columnsözelliği,
örtük grid'de sütun sayısını ve genişliğini belirler
