grid-template-rows Özelliği
grid-template-rows özelliği,
bir öğenin grid veya ağ içinde
kaplayacağı satırların sayısını ve genişliğini belirler.
Özelliğin değerinde, satır genişliklerini
herhangi bir boyut birimiyle
belirtiriz.
Özellik, ebeveyn öğede belirtilir
ve alt öğelerin satır genişliklerini tanımlar.
Özelliklerde piksel cinsinden değerler belirtildiğinde,
satır boyutları tam olarak buna uygun olacaktır.
auto kelimesini belirtirsek, satırlar
tüm mevcut alanı dolduracaktır.
fr (fraksiyon) biriminin kullanılması,
tüm alanın eşit parçalara bölüneceği anlamına gelir.
fr'nin avantajı, farklı konteynerlere
veya ekran çözünürlüklerine uyum sağlamasıdır,
çünkü fr, piksel cinsinden kesin bir boyuta
bağlı kalmadan bunları belirtilen fraksiyon sayısına böler.
Sözdizimi
seçici {
grid-template-rows: satır genişliği;
}
Örnek
Gridimizdeki öğelerimiz için satır genişliklerini belirleyelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Birinci ve üçüncü satıra piksel cinsinden sabit bir genişlik belirleyelim, ikinci satır ise mevcut alanı otomatik olarak doldursun:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi grid-template-rows özelliği ile
birinci ve ikinci satırların konteynerin bir kısmını,
üçüncü satırın 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-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
fr birimlerinde belirtilen değerler
kesirli formda olabilir. Önceki örneği değiştirerek
ikinci ve üçüncü satırlar için genişliği
kesirli sayılarla belirtelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
grid-template-rows özelliğinde
repeat() fonksiyonunu kullanalım,
bu fonksiyon konteynere, üç satırın 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-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi önceki örneği, üç özdeş satıra konteynerin iki fraksiyonunu kaplayacak dördüncü bir satırın eklenmesi için değiştirelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
İlk iki satıra konteynerin bir fraksiyonu genişlik belirleyelim, son iki satıra ise iki fraksiyon genişlik belirleyelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Şimdi satır genişliklerini, repeat() fonksiyonu
ve serbest fr birimleri kullanarak birleştirerek ayarlayalım:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Ayrıca repeat() fonksiyonunda,
konteynerimizi istediğimiz genişlikte özdeş satırlarla
dolduracak olan auto-fill değeri belirtilebilir:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
auto-fill ile birlikte,
satır genişlikleri için minimum ve maksimum değerler
arasında bir aralık belirleyen minmax fonksiyonunu
belirtmek çok kullanışlıdır.
Konteynerin genişliği tüm satırları sığdırmıyorsa,
bazıları yeni bir satıra taşınacak, bu arada satırdaki
satırlar içinde eşit olarak dağıtılacaktır.
Önceki örneği, içine minmax fonksiyonunu ekleyerek değiştirelim:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 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ı, satır sayısını
mevcut konteyner genişliğine uyacak şekilde
ayarlayarak genişletmesi veya sıkıştırmasıdır:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Örnek
Ayrıca fr ile birlikte,
satırın konteynerin hangi kısmını kaplayacağını
belirleyen % cinsinden değerler de kullanılabilir.
Bu durumda, önce % cinsinden satır boyutu hesaplanır,
ardından kalan boş alan 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-rows: 50% 1fr 2fr 30%;
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 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
üç satıra yerleştirilmiş dokuz hücreli bir tablo oluşturalım.
İkinci ve üçüncü satırlar 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 satırı 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
-
griddeki sütunların sayısını ve genişliğini belirleyen
grid-template-columnsözelliği,
-
örtük griddeki satırların sayısını ve genişliğini belirleyen
grid-auto-rowsözelliği,
