Sử dụng CSS Grid cho bố cục kiểu tạp chí
CSS cung cấp nhiều tính linh hoạt để bạn thiết kế bố cục hấp dẫn, đáp ứng. Bố cục kiểu tạp chí sắp xếp nội dung văn bản và hình ảnh hỗn hợp theo định dạng hấp dẫn, bắt mắt, khiến nó trở thành lựa chọn phổ biến.
CSS Grid cung cấp cho bạn các công cụ và khả năng kiểm soát chi tiết mà bạn cần để đạt được bố cục này, vì vậy đây là một kỹ thuật tuyệt vời để tìm hiểu.
Mục lục
Bố cục kiểu tạp chí là gì?
Bố cục kiểu tạp chí sử dụng cấu trúc dạng lưới để sắp xếp nội dung theo cột và hàng.
Chúng rất phù hợp để hiển thị các loại nội dung khác nhau như bài viết, hình ảnh và quảng cáo một cách có tổ chức và hấp dẫn.
Hiểu lưới CSS
CSS Grid là một công cụ bố cục mạnh mẽ cho phép bạn định vị các phần tử trong không gian hai chiều, giúp dễ dàng tạo cột và hàng.
Với kiểu bố cục này, hai thành phần chính sẽ phát huy tác dụng: vùng chứa lưới, chịu trách nhiệm xác định cấu trúc của lưới và các mục lưới, là các phần tử con của vùng chứa.
Đây là một ví dụ đơn giản về cách bạn có thể sử dụng CSS Grid để tạo lưới 3×3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Mã này xác định một vùng chứa lưới có ba cột có chiều rộng bằng nhau và khoảng cách 20px giữa các mục. Đây là kết quả:
Thiết lập cấu trúc HTML
Để có bố cục kiểu tạp chí, bạn sẽ cần tài liệu HTML có cấu trúc tốt. Hãy cân nhắc sử dụng các yếu tố ngữ nghĩa để sắp xếp nội dung của bạn như
<body>
<section class="magazine-layout">
<article>
<img src="https://source.unsplash.com/random/?city,night" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?city,day" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?animal" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?book" />
<p>Some Article Title</p>
</article><article>
<img src="https://source.unsplash.com/random/?food" />
<p>Some Article Title</p>
</article>
</section>
</body>
Xác định vùng chứa lưới
Để tạo lưới cho bố cục kiểu tạp chí của bạn, hãy thêm mã CSS sau:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
CSS này chỉ định rằng phần tử vùng chứa, .magazine-layout, là vùng chứa lưới sử dụng khai báo display:grid.
Các thuộc tính Grid-template-columns và Grid-template-rows sử dụng kết hợp lặp lại, tự động điều chỉnh và tối thiểu. Những điều này đảm bảo rằng chiều rộng cột và chiều cao hàng tối thiểu là 250px và càng nhiều mục càng tốt phù hợp với mỗi cột.
Đặt các mục lưới
Bây giờ hãy tạo kiểu cho từng bài viết và nội dung của nó để tạo các phần tử kiểu hình thu nhỏ hấp dẫn:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.article img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.article p {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
Tại thời điểm này, trang web của bạn sẽ trông giống như sau:
Tạo bố cục kiểu tạp chí
Để đạt được giao diện đúng phong cách tạp chí, hãy thêm các kiểu CSS để mở rộng các thành phần bài viết theo bất kỳ thứ tự nào bạn muốn:
.article:nth-child(1) {
grid-column: 1 / span 3;
}.article:nth-child(4) {
grid-column: 2 / span 2;
}
Trang của bạn bây giờ trông như thế này:
Thiết kế đáp ứng với lưới CSS
Một trong những ưu điểm của CSS Grid là khả năng phản hồi vốn có của nó. Bạn có thể sử dụng truy vấn phương tiện để điều chỉnh bố cục cho các kích thước màn hình khác nhau. Ví dụ:
@media screen and (max-width: 1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
@media screen and (max-width: 600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
Các truy vấn phương tiện này chuyển đổi giữa nhiều định nghĩa bố cục để phù hợp nhất với kích thước màn hình thiết bị. Bố cục cuối cùng của bạn sẽ thích ứng với các kích thước khác nhau:
Chuyển đổi bố cục của bạn bằng lưới CSS
CSS Grid là một công cụ linh hoạt mà bạn có thể sử dụng để tạo bố cục kiểu tạp chí có thể điều chỉnh cho phù hợp với các kích thước màn hình khác nhau. Nó cho phép bạn xác định cấu trúc lưới, đặt các mục và điều chỉnh bố cục.
Thử nghiệm với các cấu hình và kiểu lưới khác nhau để đạt được bố cục hoàn hảo lấy cảm hứng từ tạp chí cho trang web của bạn.
