CSS grid-template-rows özelliği

Tanım ve kullanım

grid-template-rows, ağırlık düzenindeki satır sayısını (ve yüksekliği) belirtir.

Değerler, her bir değeri belirten boşluklarla ayrılmış bir liste kullanılır. Her değer, ilgili satırın yüksekliğini belirtir.

Ayrıca bakınız:

CSS eğitim:CSS ağırlık düzeni

CSS referans el kitabı:grid-columns özelliği

CSS referans el kitabı:grid-template özelliği

Örnek

row-size (yükseklik) belirleyin:

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Kişisel olarak deneyin

CSS dilbilgisi

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Özellik değeri

Değer Açıklama
none Boyutlandırılmamış. Gerekirse satır oluşturun.
auto Satır boyutu, konteynerin boyutuna ve satırdaki öğe içeriğinin boyutuna bağlıdır.
max-content Satırdaki en büyük öğeye göre her satırın boyutunu ayarlayın.
min-content Satırdaki en küçük öğeye göre her satırın boyutunu ayarlayın.
length Satır boyutunu, geçerli uzunluk değerlerini kullanarak ayarlayın. Ayrıca bakınızUzunluk birimi.

Teknik ayrıntılar

Varsayılan değer: none
Devralma: Hayır
Animasyon yapımı: Destekleniyor. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS Grid Layout Module Level 1
JavaScript dilbilgisi: object.style.gridTemplateRows="50px 200px"

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44