Bố cục macro

Bố cục macro mô tả việc sắp xếp giao diện lớn hơn trên toàn trang.

Khung dạng dây có bố cục hai cột, bên cạnh cùng một bố cục như một cột để phục vụ cho khung hiển thị hẹp.

Trước khi áp dụng bất kỳ bố cục nào, bạn nên đảm bảo rằng luồng nội dung của bạn hợp lý. Thứ tự mặc định của một cột này là thứ tự mà màn hình nhỏ hơn sẽ nhận được.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

Khi bạn sắp xếp các thành phần cấp trang riêng lẻ này, bạn đang thiết kế một bố cục macro: khung hiển thị cấp cao của trang. Khi sử dụng truy vấn phương tiện, bạn có thể cung cấp các quy tắc trong CSS mô tả cách chế độ xem này sẽ điều chỉnh theo các kích thước màn hình khác nhau.

Lưới

Lưới CSS là một công cụ tuyệt vời để áp dụng bố cục cho trang của bạn. Trong ví dụ trên, giả sử bạn muốn có bố cục hai cột khi có đủ chiều rộng màn hình. Để áp dụng bố cục hai cột này khi trình duyệt đủ rộng, hãy sử dụng truy vấn phương tiện để xác định kiểu lưới phía trên điểm ngắt được chỉ định.

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Hộp linh hoạt

Đối với bố cục cụ thể này, bạn cũng có thể dùng flexbox. Các kiểu sẽ có dạng như sau:

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

Tuy nhiên, phiên bản flexbox yêu cầu nhiều CSS hơn. Mỗi cột có một quy tắc riêng để mô tả lượng không gian mà cột đó cần chiếm. Trong ví dụ về lưới, chính thông tin đó được gói gọn trong một quy tắc cho phần tử chứa.

Bạn có cần truy vấn về nội dung nghe nhìn không?

Không phải lúc nào bạn cũng cần dùng truy vấn nội dung nghe nhìn. Truy vấn nội dung đa phương tiện hoạt động hiệu quả khi bạn áp dụng thay đổi cho một vài phần tử. Tuy nhiên, nếu bố cục cần được cập nhật nhiều, thì các truy vấn nội dung đa phương tiện có thể không còn phù hợp với nhiều điểm ngắt.

Giả sử bạn đã có một trang đầy đủ các thành phần thẻ. Các thẻ không bao giờ rộng hơn 15em và bạn muốn đặt số lượng thẻ trên một dòng cho phù hợp. Bạn có thể viết các truy vấn nội dung đa phương tiện bằng các điểm ngắt 30em, 45em, 60em, v.v., nhưng việc đó khá tẻ nhạt và khó duy trì.

Thay vào đó, bạn có thể áp dụng các quy tắc để các thẻ tự động chiếm đúng khoảng không gian.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Bạn có thể tạo được bố cục tương tự bằng flexbox. Trong trường hợp này, nếu không có đủ thẻ để lấp đầy hàng cuối cùng, các thẻ còn lại sẽ kéo dài để lấp đầy không gian có sẵn thay vì xếp thành các cột. Nếu bạn muốn sắp xếp các hàng và cột, hãy sử dụng lưới.

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

Bằng cách áp dụng một số quy tắc thông minh trong flexbox hoặc lưới, bạn có thể thiết kế bố cục macro động với CSS tối thiểu và không cần bất kỳ truy vấn phương tiện nào. Bạn sẽ ít phải tốn công sức hơn — thay vào đó, bạn sẽ khiến trình duyệt phải thực hiện các phép tính. Để xem một số ví dụ về bố cục CSS hiện đại, linh hoạt mà không cần truy vấn nội dung nghe nhìn, hãy xem 1linelayouts.com.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về bố cục macro.

Câu nào mô tả đúng nhất về bố cục macro?

Bố cục chứa các bố cục khác.
Hãy thử lại! Hầu hết các bố cục đều chứa các bố cục khác.
Khi một thiết kế sử dụng hộp linh hoạt hoặc lưới.
Hãy thử lại! Cả flexbox hoặc lưới đều không có đặc điểm nào dành riêng cho bố cục macro.
Bố cục cấp thấp che phủ một phần nhỏ màn hình.
Hãy thử lại!
Bố cục cấp cao bao phủ lượng lớn màn hình.
🎉 Bố cục macro là bố cục cơ bản cho một trang, trải rộng qua nhiều khu vực trực quan và thường được điều chỉnh theo các truy vấn nội dung nghe nhìn ở kích thước trang.

Bố cục macro luôn sử dụng truy vấn phương tiện để điều chỉnh cho phù hợp với nhiều kích thước màn hình?

Đúng
Hãy thử lại! Bố cục macro không được xác định theo việc sử dụng truy vấn phương tiện.
Sai
🎉 Bố cục macro có thể điều chỉnh cho vừa với nội dung, lấp đầy không gian có sẵn, v.v. mà không cần truy vấn nội dung nghe nhìn.

Giờ bạn đã có một số ý tưởng cho bố cục macro cấp độ trang, hãy chú ý đến các thành phần trong trang. Đây là lĩnh vực của bố cục vi mô.