Giới Thiệu Về CSS Subgrid
Bạn có muốn tạo ra những layout web đẹp mắt, linh hoạt và nhất quán không? CSS Subgrid chính là giải pháp tuyệt vời mà bạn đang tìm kiếm!
CSS Subgrid Là Gì?
Khi các nhà thiết kế tạo ra bố cục cho các bản mockup, mọi thứ thường được căn chỉnh hoàn hảo với sự nhất quán. Tuy nhiên, nội dung thực tế do người dùng tạo ra lại có độ dài và định dạng rất đa dạng. Chẳng hạn, một thẻ testimonial (phản hồi của khách hàng) có thể chỉ chứa một câu ngắn, trong khi một thẻ khác có thể chứa một đoạn văn dài. Điều này gây khó khăn cho việc duy trì sự căn chỉnh hoàn hảo cho layout.
CSS Subgrid giúp giải quyết vấn đề này một cách hiệu quả. Nó cho phép các phần tử con được lồng vào trong một lưới (grid) của phần tử cha, đảm bảo rằng giao diện vẫn nhất quán bất kể nội dung là gì. Trong bài viết này, chúng ta sẽ tìm hiểu cách áp dụng CSS Subgrid để tạo ra một phần sản phẩm linh hoạt và hấp dẫn.
Hạn Chế Của CSS Grid
Việc sử dụng thuộc tính display: grid với một phần tử cha có nghĩa là chỉ các phần tử con trực tiếp mới trở thành phần tử của lưới. Nếu các phần tử con này cũng chứa phần tử con khác, chúng sẽ không nằm trong lưới chính, dẫn đến việc chúng hiển thị theo cách thông thường, gây ra sự bất cân đối trong layout.
Một ví dụ điển hình là hình ảnh dưới đây, trong đó nội dung đã bị lệch lạc do thiếu sự căn chỉnh giữa các thẻ.
Xây Dựng Phần Products Với Subgrid
Điều Kiện Tiên Quyết
Để thực hiện theo bài viết này, bạn cần có:
- Kiến thức cơ bản về HTML và CSS.
- Một IDE (trình soạn thảo văn bản).
- Một trình duyệt web.
Chúng ta sẽ không đi sâu vào mã HTML và CSS ban đầu vì trọng tâm bài viết là Subgrid. Thay vào đó, chúng ta sẽ bắt đầu với cấu trúc cơ bản và sau đó khám phá cách thêm Subgrid.
Mã HTML
Trong tệp index.html, hãy tạo cấu trúc cơ bản của dự án bao gồm liên kết tệp CSS và Google Fonts trong thẻ <head>. Trong thẻ <body>, hãy tạo phần tử chứa chính để chứa tất cả các bài viết.
Mã CSS
Trong tệp style.css, bạn cần thiết lập các kiểu toàn cục và kiểu cơ bản, sau đó định nghĩa kiểu cho phần tử chứa và các thẻ sản phẩm. Sử dụng grid-template-columns và grid-template-rows để tạo bố cục lưới cho các thẻ.
Cách Hoạt Động Của Subgrid
Mới đây, CSS Subgrid đã trở thành một công cụ mạnh mẽ trong việc căn chỉnh layout. Nó cho phép một mục lưới kế thừa các hàng hoặc cột của lưới cha, giúp duy trì sự nhất quán giữa các lưới lồng nhau và lưới cha.
Cách Sử Dụng Subgrid
Để áp dụng Subgrid, bạn chỉ cần sử dụng từ khóa subgrid cho thuộc tính grid-template-rows hoặc grid-template-columns của lưới lồng nhau. Điều này sẽ giúp giữ cho tất cả các phần tử con trong một thẻ đồng bộ và dễ dàng căn chỉnh hơn.
Kết Luận
CSS Subgrid là một công cụ hữu ích trong việc căn chỉnh bố cục web. Thay vì phải tạo ra các lưới lồng nhau phức tạp, giờ đây bạn có thể sử dụng CSS Subgrid để kế thừa các thuộc tính từ lưới cha, mở rộng khả năng thiết kế web của bạn. Hãy áp dụng CSS Subgrid trong các dự án tiếp theo của bạn để tạo ra những layout gọn gàng và ấn tượng hơn!
source: viblo
