CSS Grid: Holy Grail Layout

Holy Grail là một mẫu bố cục rất phổ biến trên web. Nó bao gồm một tiêu đề, một khu vực nội dung chính với chuyển chiều rộng cố định ở bên trái, nội dung ở giữa và một thanh bên có chiều rộng cố định ở bên phải và sau đó là một chân trang.

Holy Grail đã đạt được bằng cách sử dụng nhiều phương pháp khác nhau, có lẽ mới nhất là với Flexbox . CSS Grid Layout là một phương pháp khác và nó sẽ được chứng minh là cách phù hợp và đơn giản nhất khi hỗ trợ trình duyệt trở nên tốt hơn. Nó được thiết kế đặc biệt để dễ dàng hoàn thành bố cục trang đầy đủ.

Bản thử trực tiếp

Bạn có thể xem bản trình diễn này đang hoạt động tại đây nếu bạn có trình duyệt hỗ trợ. Dưới đây là hướng dẫn nhanh về cách bật bố cục lưới trong Fixefox và Chrome.

Đánh dấu

Đánh dấu thực sự đơn giản và số lượng yếu tố cần thiết để tạo bố cục là tối thiểu và có ngữ nghĩa:

<div class="container">   <header>     <!-- Header content -->   </header>    <nav>     <!-- Navigation -->   </nav>    <main>     <!-- Main content -->   </main>    <aside>     <!-- Sidebar / Ads -->   </aside>    <footer>     <!-- Footer content -->   </footer> </div>

Cái lưới sắt

Sử dụng các vùng lưới và đơn vị fr , đây là cách ta xác định lưới trên containers :

.container {   display: grid;    grid-template-areas:     "header header header"     "nav content side"     "footer footer footer";    grid-template-columns: 200px 1fr 200px;   grid-template-rows: auto 1fr auto;   grid-gap: 10px;    height: 100vh; }

Lưu ý việc sử dụng chiều cao: 100vh (100% chiều cao khung nhìn) trên containers để mở rộng lưới đến ít nhất bằng chiều cao đầy đủ của khung nhìn. Hàng giữa của lưới của ta được đặt thành chiều cao 1fr để nó có thêm không gian khi cần thiết.

Mục lưới

Các mục lưới rất đơn giản để đặt trên lưới với thuộc tính vùng grid-area :

header {   grid-area: header; }  nav {   grid-area: nav;   margin-left: 0.5rem; }  main {   grid-area: content; }  aside {   grid-area: side;   margin-right: 0.5rem; }  footer {   grid-area: footer; }

Phần thưởng: Làm cho nó đáp ứng

Thật dễ dàng để sử dụng media query và chỉ thay đổi một vài thuộc tính trên containers lưới để thu gọn mọi thứ thành một cột trên các thiết bị nhỏ hơn:

@media (max-width: 768px) {   .container {     grid-template-areas:       "header"       "nav"       "content"       "side"       "footer";      grid-template-columns: 1fr;     grid-template-rows:       auto /* Header */       minmax(75px, auto) /* Nav */       1fr /* Content */       minmax(75px, auto) /* Sidebar */       auto; /* Footer */   }    nav, aside {     margin: 0;   } }

Grid và Flexbox

Grid không phải là sự thay thế cho Flexbox và Flexbox vẫn là giải pháp phù hợp cho vị trí một chiều và bố cục vi mô. Rất dễ dàng kết hợp bố cục lưới và hộp linh hoạt và chúng được thiết kế để hoạt động tốt với nhau.

Ví dụ, ta có thể sử dụng flexbox trên tiêu đề của bạn để các phần tử bên trong containers tiêu đề được phân bổ đồng đều trên trục hoành:

header {   grid-area: header;    display: flex;   justify-content: space-between;   align-items: center; }

Tags:

Các tin liên quan

Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06
Hàm CSS attr ()
2016-06-20
Radial Gradients trong CSS
2016-06-13
Ngữ pháp tuyến tính trong CSS
2016-06-12