Subgrid: Layout phức tạp trở nên đơn giản

CSS Grid đã cách mạng hóa layout, nhưng có một limitation lớn: child elements không thể align theo grid lines của parent. Bạn phải tự đảm bảo content trong các grid items có cùng height — điều gần như impossible với dynamic content. Subgrid giải quyết vấn đề này.

Vấn đề cần giải quyết

Hãy tưởng tượng grid of cards — mỗi card có image, title, description, price. Bạn muốn tất cả titles align cùng hàng, tất cả prices align cùng hàng — bất kể title dài ngắn khác nhau. Trước subgrid, bạn phải hack bằng fixed heights hoặc JavaScript.

Subgrid syntax

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  /* Parent grid định nghĩa row tracks */
}

.product-card {
  display: grid;
  /* Card inherit row tracks từ parent */
  grid-template-rows: subgrid;
  /* Card span 4 rows trong parent grid */
  grid-row: span 4;
  gap: 0.75rem;
}

/* Mỗi child tự align vào đúng row track */
.product-card img { grid-row: 1; }
.product-card h3 { grid-row: 2; }
.product-card p { grid-row: 3; }
.product-card .price { grid-row: 4; align-self: end; }

Kết quả: tất cả titles trên cùng một hàng, tất cả descriptions cùng hàng, prices cùng hàng — bất kể content length. Grid tự adjust row heights theo content dài nhất.

Subgrid cho columns

Subgrid không chỉ cho rows. Use case phổ biến: form layout với labels align:

.form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
}

.form-group {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1; /* Span toàn bộ columns */
}

/* Label, input, helper text tự align theo parent columns */
.form-group label { grid-column: 1; }
.form-group input { grid-column: 2; }
.form-group .helper { grid-column: 3; }

Tất cả labels có cùng width (auto-sized theo label dài nhất), inputs fill remaining space, helper text align phải. Clean và maintainable.

Khi nào dùng Subgrid?

• Card grids — align content across cards (image, title, description, CTA).
• Form layouts — label/input/error alignment.
• Table-like layouts — mà không dùng <table>.
• Navigation menus — multi-level menus với alignment.

Browser support

Tất cả major browsers đã support subgrid. Đây không phải experimental feature — production-ready.

Kết

Subgrid là missing piece của CSS Grid. Nó giải quyết bài toán cross-item alignment mà trước đây cần JavaScript hoặc ugly hacks. Nếu bạn dùng CSS Grid (và bạn nên dùng), subgrid là natural extension mà bạn sẽ dùng thường xuyên.