Bố cục vĩ mô mô tả tổ chức lớn hơn, trên toàn trang của giao diện.
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 có ý nghĩa. Đây là thứ tự mặc định của một cột mà các màn hình nhỏ sẽ nhận được.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Khi sắp xếp các thành phần riêng lẻ ở cấp trang này, bạn đang thiết kế một bố cục vĩ mô: chế độ xem cấp cao của trang. Bằng cách 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 khung hiển thị này sẽ điều chỉnh theo nhiều kích thước màn hình.
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ước, 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 một truy vấn nội dung nghe nhìn để xác định các kiểu lưới ở trên một điểm ngắt cụ thể.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Đối với bố cục cụ thể này, bạn cũng có thể sử 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 cần 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 đó sẽ chiếm. Trong ví dụ về lưới, thông tin đó được đóng gói 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 sử dụng truy vấn nội dung nghe nhìn. Truy vấn nội dung nghe nhìn hoạt động tốt khi bạn áp dụng các thay đổi cho một số phần tử, nhưng nếu bố cục cần được cập nhật nhiều, thì truy vấn nội dung nghe nhìn có thể trở nên khó quản lý với nhiều điểm ngắt.
Giả sử bạn có một trang chứa đầ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 nhiều thẻ nhất có thể trên một dòng.
Bạn có thể viết các truy vấn nội dung nghe nhìn với các điểm ngắt như 30em, 45em và 60em nhưng việc này khá tẻ nhạt và khó duy trì.
Thay vào đó, bạn có thể áp dụng các quy tắc để bản thân thẻ tự động chiếm lượng không gian phù hợp.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Bạn có thể đạt đượ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 giãn để lấp đầy khoảng trống thay vì xếp thành cột. Nếu bạn muốn căn chỉnh 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ó truy vấn phương tiện nào. Điều này giúp bạn giảm bớt công việc vì bạn đang yêu cầu trình duyệt thực hiện các phép tính. Để xem một số ví dụ về bố cục CSS hiện đại có tính linh hoạt mà không cần truy vấn phương tiện, hãy xem 1linelayouts.com.
Kiểm tra kiến thức của bạn
Kiểm tra kiến thức của bạn về bố cục vĩ mô.
Câu nào mô tả đúng nhất về bố cục vĩ mô?
Bố cục macro luôn sử dụng truy vấn nội dung nghe nhìn để thích ứng với nhiều kích thước màn hình?
Giờ đây, khi bạn đã có một số ý tưởng về bố cục macro ở cấp trang, hãy chuyển sự chú ý sang các thành phần trong trang. Đây là phạm vi của bố cục vi mô.