Bố cục bát đĩa

Đối với bố cục rãnh truyền thống cổ điển này, bao gồm đầu trang, chân trang, thanh bên trái, thanh bên phải và nội dung chính. Bố cục này tương tự như bố cục trước đây, nhưng bây giờ đã có thanh bên!

Để viết toàn bộ lưới này bằng một dòng mã, hãy sử dụng thuộc tính grid-template. Thao tác này cho phép bạn đặt cả hàng và cột cùng một lúc.

Cặp thuộc tính và giá trị là: grid-template: auto 1fr auto / auto 1fr auto. Dấu gạch chéo giữa danh sách đầu tiên và thứ hai được phân tách bằng dấu cách là dấu ngắt giữa các hàng và cột.

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

Như trong ví dụ cuối cùng, nơi đầu trang và chân trang có nội dung được tự động định kích thước, ở đây, thanh bên trái và bên phải sẽ được tự động định kích thước dựa trên kích thước nội tại của thành phần con. Tuy nhiên, lần này thuộc tính có kích thước theo chiều ngang (chiều rộng) thay vì chiều dọc (chiều cao).

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