CSS Subgrid: Giải phóng sức mạnh của Bố cục Lồng nhau

CSS Grid đã cách mạng hóa bố cục web, mang lại sự linh hoạt và kiểm soát chưa từng có. Tuy nhiên, việc quản lý các grid lồng nhau đôi khi có thể trở nên cồng kềnh. Đó là lúc CSS Subgrid xuất hiện để giải cứu. Subgrid cho phép một mục grid kế thừa kích thước track của grid cha, giúp đơn giản hóa các bố cục phức tạp và làm cho mã của bạn dễ bảo trì hơn. Bài viết này cung cấp một hướng dẫn toàn diện để hiểu và triển khai CSS Subgrid, hoàn chỉnh với các ví dụ thực tế và thông tin chi tiết cho các nhà phát triển ở mọi cấp độ.

CSS Subgrid là gì?

Subgrid là một tính năng của CSS Grid cho phép một mục grid trở thành một grid, kế thừa các track hàng và cột được xác định bởi grid cha của nó. Điều này có nghĩa là bạn có thể căn chỉnh nội dung trên nhiều grid lồng nhau mà không cần xác định rõ ràng kích thước track trong mỗi grid lồng nhau. Hãy coi nó như một cách để mở rộng cấu trúc của grid cha vào các grid con, tạo ra một bố cục gắn kết và nhất quán hơn.

Tại sao nên sử dụng Subgrid?

Bố cục đơn giản hóa: Subgrid làm giảm sự phức tạp của các grid lồng nhau, giúp mã CSS của bạn sạch sẽ và dễ hiểu hơn.
Căn chỉnh nhất quán: Dễ dàng căn chỉnh nội dung qua nhiều cấp độ lồng nhau, đảm bảo thiết kế hấp dẫn về mặt hình ảnh và chuyên nghiệp.
Cải thiện khả năng bảo trì: Các thay đổi đối với grid cha sẽ tự động lan truyền đến các subgrid, giảm nhu cầu điều chỉnh thủ công ở nhiều nơi.
Tăng cường khả năng đáp ứng: Subgrid hoạt động liền mạch với các nguyên tắc thiết kế đáp ứng, điều chỉnh bố cục cho các kích thước màn hình khác nhau mà không gây ra lỗi bố cục.

Khả năng tương thích của trình duyệt

Trước khi đi sâu vào triển khai, điều cần thiết là phải kiểm tra khả năng tương thích của trình duyệt. Kể từ cuối năm 2023, Subgrid đã được hỗ trợ tốt trên các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Tuy nhiên, luôn là một thói quen tốt khi sử dụng Can I use để xác minh trạng thái hỗ trợ mới nhất.

Triển khai Subgrid cơ bản

Hãy bắt đầu với một ví dụ đơn giản để minh họa các khái niệm cơ bản của Subgrid.

Cấu trúc HTML

Đầu tiên, chúng ta xác định cấu trúc HTML cơ bản cho grid của mình.


<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

Tạo kiểu CSS

Bây giờ, hãy xác định CSS để tạo grid cha và subgrid bên trong phần tử .content.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Define placement of items inside the .content subgrid */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

Trong ví dụ này, phần tử .content được định nghĩa là một subgrid. Các thuộc tính grid-template-columns: subgrid; và grid-template-rows: subgrid; hướng dẫn subgrid kế thừa kích thước track từ grid cha. Vùng nội dung bây giờ tuân theo kích thước track được xác định trong grid container chính, mà không cần bất kỳ cài đặt rõ ràng nào cho chính subgrid. Điều này đảm bảo sự căn chỉnh hoàn hảo giữa sidebar và các mục bên trong vùng nội dung.

Các kỹ thuật Subgrid nâng cao

Mở rộng qua các Track

Subgrid cũng cho phép các mục trong subgrid mở rộng qua nhiều track, giống như trong một grid thông thường. Điều này cung cấp sự linh hoạt hơn nữa trong việc tạo ra các bố cục phức tạp.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Mã này sẽ làm cho .item-1 mở rộng qua hai cột đầu tiên của subgrid.

Đường lưới được đặt tên

Bạn có thể sử dụng các đường lưới được đặt tên với Subgrid để có được sự rõ ràng và kiểm soát tốt hơn nữa. Giả sử bạn có các đường được đặt tên trong grid cha của mình:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

Sau đó, bạn có thể tham chiếu các đường được đặt tên này trong subgrid của mình:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

Xử lý các Track ngầm định

Nếu số lượng mục grid vượt quá số lượng track được xác định trong grid cha, Subgrid sẽ tạo ra các track ngầm định. Bạn có thể kiểm soát kích thước của các track ngầm định này bằng cách sử dụng các thuộc tính grid-auto-rows và grid-auto-columns, tương tự như CSS Grid thông thường.

Ví dụ thực tế và các trường hợp sử dụng

Hãy cùng khám phá một số ví dụ thực tế về cách Subgrid có thể được sử dụng để tạo ra các bố cục tinh vi.

Danh sách sản phẩm phức tạp

Hãy tưởng tượng một danh sách sản phẩm nơi bạn muốn hiển thị nhiều chi tiết sản phẩm (hình ảnh, tên, mô tả, giá) một cách nhất quán và thẳng hàng. Subgrid có thể giúp đạt được điều này một cách dễ dàng.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

Trong ví dụ này, các phần tử .product sử dụng Subgrid để căn chỉnh hình ảnh, tên, mô tả và giá một cách nhất quán trên tất cả các sản phẩm, ngay cả khi độ dài nội dung của chúng khác nhau. Điều này đảm bảo một sự trình bày sạch sẽ và chuyên nghiệp.

Bố cục kiểu tạp chí

Tạo các bố cục kiểu tạp chí với các khối nội dung khác nhau có thể là một thách thức. Subgrid đơn giản hóa quá trình bằng cách cho phép bạn căn chỉnh các phần tử trên các phần khác nhau của bố cục.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

Trong ví dụ này, bài viết chính, bài viết ở sidebar và hình ảnh nổi bật đều chia sẻ cùng một cấu trúc grid, đảm bảo sự căn chỉnh nhất quán của tiêu đề và nội dung trên các phần khác nhau. Việc sử dụng Subgrid giúp đơn giản hóa CSS và làm cho bố cục dễ bảo trì hơn.

Bố cục biểu mẫu

Tạo các bố cục biểu mẫu phức tạp với các nhãn và trường nhập liệu được căn chỉnh có thể khá phức tạp. Subgrid cung cấp một giải pháp đơn giản.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Define track sizes in the parent grid */
    gap: 10px;
}

Ở đây, các phần tử .form-row sử dụng Subgrid để căn chỉnh các nhãn và trường nhập liệu một cách nhất quán trên tất cả các hàng. Kích thước track được xác định trong grid cha (.form-grid), đảm bảo một giao diện đồng nhất.

Thực tiễn tốt nhất và những lưu ý

Bắt đầu với một nền tảng Grid vững chắc: Trước khi triển khai Subgrid, hãy đảm bảo grid cha của bạn được xác định rõ ràng và có tính đáp ứng.
Sử dụng đường lưới được đặt tên: Các đường lưới được đặt tên cải thiện khả năng đọc và bảo trì, đặc biệt là trong các bố cục phức tạp.
Kiểm tra kỹ lưỡng: Kiểm tra bố cục Subgrid của bạn trên các trình duyệt và thiết bị khác nhau để đảm bảo hiển thị nhất quán.
Cân nhắc khả năng truy cập: Đảm bảo bố cục Subgrid của bạn có thể truy cập được cho người dùng khuyết tật bằng cách sử dụng HTML ngữ nghĩa và cung cấp các thuộc tính ARIA phù hợp.
Đừng lạm dụng Subgrid: Mặc dù Subgrid rất mạnh mẽ, nó không phải lúc nào cũng là giải pháp tốt nhất. Hãy xem xét các giải pháp thay thế đơn giản hơn như Flexbox hoặc Grid thông thường cho các bố cục ít phức tạp hơn.

Subgrid so với CSS Grid thông thường

Mặc dù cả Subgrid và CSS Grid đều là những công cụ bố cục mạnh mẽ, chúng phục vụ các mục đích khác nhau. CSS Grid thông thường lý tưởng để tạo bố cục trang tổng thể và xác định cấu trúc cơ bản của nội dung của bạn. Mặt khác, Subgrid phù hợp nhất để quản lý các bố cục lồng nhau và căn chỉnh nội dung qua nhiều cấp độ lồng nhau. Hãy coi Subgrid như một phần mở rộng của CSS Grid giúp đơn giản hóa các kịch bản bố cục phức tạp.

Xử lý các sự cố thường gặp

Subgrid không hoạt động: Kiểm tra lại khả năng tương thích của trình duyệt và đảm bảo rằng bạn đã kích hoạt Subgrid bằng cách đặt grid-template-columns: subgrid; và/hoặc grid-template-rows: subgrid; trên phần tử subgrid.
Vấn đề về căn chỉnh: Xác minh rằng kích thước track trong grid cha của bạn được xác định chính xác và các mục subgrid được định vị đúng bằng cách sử dụng grid-column và grid-row.
Lỗi bố cục không mong muốn: Kiểm tra bố cục của bạn trên các kích thước màn hình khác nhau để xác định và khắc phục bất kỳ sự cố thiết kế đáp ứng nào.

Kết luận

CSS Subgrid là một bổ sung có giá trị cho bộ công cụ CSS Grid, cung cấp một cách mạnh mẽ để quản lý các bố cục lồng nhau phức tạp và tạo ra các thiết kế web hấp dẫn về mặt hình ảnh, dễ bảo trì và đáp ứng. Bằng cách hiểu các khái niệm cơ bản và khám phá các ví dụ thực tế, bạn có thể tận dụng Subgrid để xây dựng các bố cục tinh vi mà trước đây khó hoặc không thể đạt được bằng các kỹ thuật CSS truyền thống. Hãy đón nhận Subgrid và mở khóa những khả năng mới trong các dự án phát triển web của bạn. Subgrid cho phép bạn thực sự mở rộng sức mạnh của CSS grid vào các phần tử lồng nhau, cho phép kiểm soát tốt hơn và khả năng bảo trì mã. Hãy thử nghiệm với nó và khám phá những lợi thế trong việc đơn giản hóa các bố cục CSS phức tạp.

MLOG