{i>holy grail layout

Untuk tata letak holy grail klasik ini, terdapat header, footer, sidebar kiri, sidebar kanan, dan konten utama. Ini mirip dengan tata letak sebelumnya, tetapi sekarang dengan sidebar.

Untuk menulis seluruh petak ini menggunakan satu baris kode, gunakan properti grid-template. Hal ini memungkinkan Anda untuk mengatur baris dan kolom secara bersamaan.

Pasangan properti dan nilai adalah: grid-template: auto 1fr auto / auto 1fr auto. Garis miring di antara daftar yang dipisahkan spasi pertama dan kedua adalah jeda di antara baris dan kolom.

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

Seperti pada contoh terakhir, header dan footer memiliki konten yang diskalakan secara otomatis, di sini sidebar kiri dan kanan otomatis disesuaikan ukurannya berdasarkan ukuran intrinsik turunannya. Namun, kali ini ukuran horizontal (lebar), bukan vertikal (tinggi).

HTML

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

CSS


        .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;
}