Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Bu klasik kutsal plan düzeninde bir başlık, altbilgi, sol kenar çubuğu, sağ kenar çubuğu ve ana içerik bulunur. Önceki düzene benziyor, ancak artık kenar çubukları var!
Bu tablonun tamamını tek bir kod satırı kullanarak yazmak için grid-template özelliğini kullanın. Bu sayede hem satırları hem de sütunları aynı anda ayarlayabilirsiniz.
Özellik ve değer çifti: grid-template: auto 1fr auto / auto 1fr auto. Boşlukla ayrılmış birinci ve ikinci listeler arasındaki eğik çizgi, satır ve sütunlar arasındaki boşluktur.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Son örnekte olduğu gibi, üstbilgi ve altbilgide otomatik olarak boyutlandırılmış içerik bulunur. Burada sol ve sağ kenar çubuğu çocukların doğuştan gelen boyutuna göre otomatik olarak boyutlandırılır. Ancak bu kez boyut, dikey (yükseklik) yerine yataydır (genişlik).