CSS Subgrid là gì? Cách sử dụng CSS Subgrid

1599

18-09-2024

Bạn muốn tạo ra các layout web đẹp mắt, linh hoạt và nhất quán bất kể nội dung thay đổi? CSS Subgrid chính là giải pháp tối ưu cho bạn! Vậy giải pháp này như thế nào hãy cùng Bizfly Cloud tìm hiểu ngay.

CSS Subgrid là gì?

Khi các nhà thiết kế tạo bố cục trong bản mockup, mọi thứ bao gồm cả nội dung thường trông được căn chỉnh hoàn hảo và nhất quán.

Tuy nhiên, trong thực tế, nội dung do người dùng tạo ra lại rất đa dạng. Ví dụ, một thẻ testimonial (phản hồi của khách hàng) có thể chỉ có một câu ngắn gọn, trong khi một thẻ khác lại có cả một đoạn văn bản dài. Điều này gây khó khăn trong việc duy trì sự căn chỉnh hoàn hảo cho layout.

CSS Subgrid có thể dễ dàng xử lý những điểm không nhất quán về bố cục web này. Nó cho phép các phần tử được lồng bên trong căn chỉnh với lưới (grid) của phần tử cha, đảm bảo giao diện nhất quán bất kể nội dung là gì.

Trong hướng dẫn này, chúng ta sẽ khám phá cách sử dụng CSS Subgrid để tạo ra một phần sản phẩm linh hoạt và đẹp mắt.

Hạn chế của CSS Grid

Việc thêm thuộc tính display: grid vào một phần tử chứa đồng nghĩa với việc chỉ các phần tử con trực tiếp của nó mới trở thành các phần tử của lưới (grid). Nếu các phần tử con trực tiếp này cũng có phần tử con, chúng sẽ không phải là một phần của lưới chính - do đó chúng sẽ hiển thị theo luồng thông thường.

Điều này gây ra vấn đề bởi vì nếu không có liên kết trực tiếp với nhau, mỗi phần tử con sẽ chiếm không gian mà nó cần và không quan tâm đến các phần tử "anh chị em" của nó. Điều này dẫn đến nội dung bị lệch như bạn có thể thấy ở bên trái của hình ảnh bên dưới.

Dự án mà chúng ta sẽ xây dựng sẽ khám phá một giải pháp Subgrid chỉ với một vài dòng mã CSS, giúp chúng ta đạt được sự căn chỉnh mong muốn như ở bên phải của hình ảnh trên.

Cách thức hoạt động của Subgrid

Màn hình hiển thị ở trên sẽ là một cơn ác mộng đối với các nhà thiết kế và các bên liên quan cho đến khi nó được khắc phục. Trước đây, để khắc phục điều này, các nhà phát triển cần biến những thẻ này thành các lưới lồng nhau. Nhưng đoạn mã đó cuối cùng sẽ trở nên lộn xộn và khó bảo trì.

CSS Subgrid cho phép một mục lưới kế thừa các rãnh lưới (hàng hoặc cột) của lưới cha, thay vì xác định rãnh lưới của riêng nó. Điều này đặc biệt hữu ích để duy trì sự căn chỉnh nhất quán giữa các lưới lồng nhau và lưới cha của chúng.

Trong dự án của chúng ta, thay vì xác định một hàng cho các biểu tượng, tiêu đề, văn bản và nút, chúng ta có thể khiến chúng kế thừa cùng một cấu trúc từ lưới cha của chúng (phần tử chứa thẻ).

Cách sử dụng Subgrid

Để tạo subgrid, hãy gán từ khóa làm giá trị cho grid-template-columns hoặc grid-template-rows của lưới lồng nhau.

Để triển khai điều này trong dự án của chúng ta, trước tiên chúng ta sẽ biến phần tử article thành một phần tử chứa lưới để đặt các phần tử con của nó trong một lưới có cấu trúc. Tiếp theo, grid-template-rows được cung cấp giá trị là subgrid. Điều này kế thừa cấu trúc hàng từ lưới của phần tử chứa thẻ.

Việc đặt grid-row thành span 4 về cơ bản có nghĩa là phần tử sẽ chiếm một không gian bao phủ 4 hàng của lưới cha.

article display: grid; grid-template-rows: subgrid; grid-row: span 4;

Mã tùy chọn

Khi nói về CSS Subgrid, điều đầu tiên cần nhắc đến là cú pháp mã. Để sử dụng Subgrid, bạn sẽ phải biết cách áp dụng nó thông qua CSS grid layout. Subgrid cho phép một phần tử con "kế thừa" cấu trúc lưới từ phần tử cha của nó, giúp tối ưu hóa việc quản lý không gian và bố cục.

Khai báo Subgrid

Để khai báo một phần tử là Subgrid, bạn chỉ cần sử dụng thuộc tính display: subgrid; trong CSS.

.parent {

display: grid;

grid-template-columns: repeat(3, 1fr);

}

.child {

display: subgrid;

}

Trong đoạn mã trên, .child sẽ trở thành một Subgrid và sẽ kế thừa các cột và hàng từ .parent. Việc này không chỉ giúp tiết kiệm thời gian lập trình mà còn đảm bảo tính đồng bộ trong thiết kế.

Cách tổ chức lưới với Subgrid

Một trong những lợi thế lớn của Subgrid là khả năng tổ chức lưới một cách dễ dàng. Khi bạn thiết lập Subgrid, bạn có thể điều chỉnh vị trí của các phần tử con trong lưới theo cách bạn mong muốn.

.child-item {

grid-column: span 2; /* Chiếm 2 cột trong Subgrid */

grid-row: 1; /* Nằm ở hàng đầu tiên */

}

Sử dụng grid-column và grid-row, bạn có thể định hình rõ ràng vị trí của từng mục bên trong Subgrid, giúp tạo ra giao diện người dùng hấp dẫn và thân thiện.

Tính linh hoạt với Subgrid

CSS Subgrid không chỉ dừng lại ở việc tạo bố cục đẹp mắt. Nó còn cho phép các nhà phát triển thay đổi kích thước và điều chỉnh các phần tử một cách dễ dàng.

Trình duyệt nào hỗ trợ Subgrid

Một câu hỏi quan trọng khi tìm hiểu về CSS Subgrid là liệu tính năng này có được hỗ trợ bởi các trình duyệt phổ biến hay không. Hiện tại, việc hỗ trợ Subgrid còn đang trong quá trình phát triển và chưa hoàn toàn đồng nhất giữa các trình duyệt.

Các trình duyệt hỗ trợ Subgrid

Trình duyệt	Hỗ trợ Subgrib
Chrome	Không
Firefox	Có
Safari	Không
Edge	Chưa xác nhận

Ứng dụng thực tế của Subgrid trong thiết kế web

Tạo bố cục bài viết

Một trong những ứng dụng phổ biến nhất của Subgrid là xây dựng bố cục bài viết trong blog hoặc trang tin tức. Bạn có thể dễ dàng tổ chức các phần tử như tiêu đề, nội dung và hình ảnh sao cho chúng trông hài hòa và chuyên nghiệp.

Đặc biệt, bạn cũng có thể nhanh chóng thay đổi thiết kế mà không làm hỏng các phần tử con. Điều này rất quan trọng trong việc duy trì tính nhất quán trong thiết kế.

Thiết kế giao diện thương mại điện tử

CSS Subgrid cũng cực kỳ hữu ích cho các trang web thương mại điện tử. Bạn có thể dễ dàng tạo ra các danh sách sản phẩm, bao gồm hình ảnh, tên sản phẩm và giá cả mà không gặp khó khăn nào. Điều này không chỉ giúp đơn giản hóa việc thiết kế mà còn đảm bảo rằng tất cả sản phẩm đều hiển thị đẹp mắt trên mọi thiết bị.

Xây dựng bảng điều khiển

Với Subgrid, bạn cũng có thể xây dựng các bảng điều khiển phức tạp mà không cần phải lo lắng về việc quá tải mã HTML. Bạn có thể tạo các khu vực riêng biệt cho từng thông tin và dễ dàng điều chỉnh khi cần.

Việc sử dụng Subgrid cho các bảng điều khiển giúp giảm thiểu mã lặp lại và cải thiện hiệu suất tổng thể.

Lợi ích và hạn chế của Subgrid

Phân tích cả hai khía cạnh lợi ích và hạn chế của Subgrid để đưa ra cái nhìn tổng quan về tính năng này.

Lợi ích của Subgrid

Khả năng kế thừa cấu trúc lưới từ phần tử cha: Giúp tiết kiệm thời gian và nỗ lực trong việc thiết kế các bố cục phức tạp.
Subgrid cải thiện khả năng tái sử dụng mã: Khi bạn có một cấu trúc lưới rõ ràng, bạn có thể dễ dàng tạo ra các phần tử con mà không cần phải sao chép mã hoặc thiết lập lại các thuộc tính lưới.
Cho phép tạo ra các thiết kế linh hoạt và thích ứng: Bạn có thể dễ dàng điều chỉnh kích thước hoặc vị trí của các phần tử mà không làm thay đổi các phần tử khác, tạo ra trải nghiệm người dùng tốt hơn.

Hạn chế của Subgrid

Không phải tất cả các trình duyệt đều hỗ trợ tính năng này.
Phức tạp trong việc quản lý mã: Trong một số trường hợp, nếu không được tổ chức tốt, mã CSS có thể trở nên khó đọc và khó bảo trì khi sử dụng Subgrid.
Việc học và làm quen với Subgrid có thể mất thời gian: Đặc biệt đối với những người mới bắt đầu trong lĩnh vực phát triển web.

Kết luận

Subgrid là một công cụ hữu ích để căn chỉnh bố cục - điều mà bạn phải làm thủ công trong quá khứ. Giờ đây, các lưới lồng nhau có thể kế thừa các thuộc tính như hàng và cột từ lưới cha của chúng. Điều này mở rộng khả năng của CSS Grid để tạo ra các thiết kế nhất quán và căn chỉnh hoàn hảo.

Nếu bạn đã bao giờ muốn tạo một vòng lặp CSS Grid bất tận chỉ để có được một thiết kế với nội dung có kích thước khác nhau để căn chỉnh hoàn hảo - thay vào đó, hãy sử dụng CSS Subgrid để làm cho mã của bạn gọn gàng hơn và dễ quản lý hơn.

Dưới đây là một số tài nguyên hữu ích: