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 các nhà phát triển một loạt công cụ và mức độ kiểm soát phức tạp cần thiết để tạo bố cục như vậy, do đó biến nó thành một bộ kỹ năng có giá trị cần có.
Bố cục kiểu tạp chí là gì?
Bố cục kiểu tạp chí sử dụng hệ thống dạng lưới để sắp xếp nội dung theo cột và hàng, mang lại vẻ ngoài có trật tự cho thiết kế.
Các mẫu sáng tạo của chúng tôi vượt trội trong việc trình bày nhiều loại phương tiện như văn bản, hình ảnh trực quan và quảng cáo theo cách có cấu trúc và đẹp mắt.
Tìm hiểu lưới CSS
CSS Grid là một giải pháp bố cục nâng cao cho phép người dùng sắp xếp các phần tử trong mặt phẳng hai chiều một cách dễ dàng, tạo điều kiện thuận lợi cho việc tạo cấu trúc cột cũng như hình thành hàng thông qua khả năng tổ chức không gian mạnh mẽ của nó.
vùng chứa lưới, thiết lập khung của lưới và các mục lưới, đóng vai trò là phần tử con của vùng chứa nói trên.
Chắc chắn, đây là một minh họa hay về cách người ta có thể sử dụng CSS Grid để tạo bố cục lưới 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
Mã hiện tại xây dựng bố cục dựa trên lưới bao gồm ba phần ngang, mỗi phần có chiều rộng giống hệt nhau và có khoảng cách nhất quán 20 pixel giữa các phần tử liền kề. Hình dung tiếp theo được trình bày dưới đây:
Thiết lập cấu trúc HTML
Để đạt được một thiết kế giống như ấn phẩm, điều cần thiết là phải có cấu trúc HTML có tổ chức. Một cách tiếp cận liên quan đến việc sử dụng các thẻ có ý nghĩa về mặt ngữ nghĩa như và để cấu trúc nội dung. Bạn có thể tìm thấy nền tảng phù hợp trong ví dụ dưới đây:
<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
Để xây dựng một lưới nhằm đạt được giao diện giống tạp chí cho bố cục của bạn, hãy kết hợp kiểu CSS sau:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;
/* Defines the grid container */
display: grid;
/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
lưới".
Các thuộc tính grid-template-columns và grid-template-rows sử dụng sự kết hợp của sự lặp lại, thay đổi kích thước tự động và các ràng buộc tối thiểu/tối đa để đảm bảo rằng chiều rộng cột và chiều cao hàng đo không dưới 250 pixel trong khi chứa được nhiều phần tử khả thi trong mỗi chiều tương ứng.
Đặt các mục lưới
Hãy cân nhắc việc nâng cao sức hấp dẫn trực quan của bài viết bằng cách chuyển đổi chúng thành các hình ảnh thu nhỏ, bắt mắt, được gọi là hình thu nhỏ.
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;
}
Thật vậy, sau khi hoàn thành các bước được nêu ở trên, trang web của một người phải hiển thị giao diện giống như sau:
Tạo bố cục kiểu tạp chí
Để có được giao diện giống tạp chí thực sự, hãy sử dụng kiểu CSS để sắp xếp các thành phần bài viết theo ý 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 lợi ích của việc sử dụng CSS Grid là khả năng thích ứng nội tại của nó, vì nó cho phép các nhà thiết kế và nhà phát triển sử dụng truy vấn phương tiện để sửa đổi cách sắp xếp các thành phần dựa trên các kích thước màn hình khác nhau. Bằng cách triển khai tính năng như vậy, người ta có thể đảm bảo rằng nội dung trang web của họ vẫn hấp dẫn về mặt hình ảnh và thân thiện với người dùng trên nhiều thiết bị có khả năng hiển thị đa dạng.
/* Media query for screens up to 1100px */
@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 query for screens up to 600px */
@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ói trên sử dụng nhiều cấu hình bố cục khác nhau được tối ưu hóa cho các kích thước màn hình khác nhau, từ đó đảm bảo rằng thiết kế của bạn đáp ứng và tương thích với nhiều thiết bị khác nhau.
Trình duyệt của bạn không hỗ trợ thẻ video.
Chuyển đổi bố cục của bạn bằng lưới CSS
Việc sử dụng CSS Grid cho phép tạo các bố cục thích ứng, lấy cảm hứng từ tạp chí, phù hợp liền mạch với các kích thước màn hình khác nhau. Công cụ đa năng này cho phép người dùng thiết lập hệ thống lưới, định vị các phần tử và sửa đổi cách sắp xếp một cách dễ dàng.
Khám phá các cách sắp xếp lưới và tính thẩm mỹ khác nhau để tạo ra một thiết kế lý tưởng, chịu ảnh hưởng của ấn phẩm cho sự hiện diện trực tuyến của bạn.