Kutsal kase düzeni

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).

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}