Subgrid là gì?

subgrid cho phép một grid item dùng lại các track của grid cha thay vì tự tạo lưới riêng.

Vấn đề nó giải: các card nằm cạnh nhau, mỗi card có tiêu đề, mô tả, nút — nhưng nội dung dài ngắn khác nhau nên các phần không thẳng hàng giữa các card.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;   /* tiêu đề / mô tả / nút */
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;   /* kế thừa 3 hàng của cha */
}

Giờ tiêu đề của mọi card cao bằng nhau, nút của mọi card nằm cùng một đường — không cần chiều cao cố định, không cần JS đo.

Hỗ trợ: Firefox 71+, Safari 16+, Chrome 117+ (2023) — nay đã Baseline, dùng được trong sản phẩm.

Lưu ý 1: phải khai báo grid-row: span 3 (hoặc grid-column: span n) thì subgrid mới biết trải trên bao nhiêu track của cha.

Lưu ý 2: subgrid chỉ kế thừa track, không kế thừa gap trừ khi bỏ trống — đặt gap riêng trên subgrid sẽ ghi đè giá trị của cha.

Chốt: đây là câu hỏi phân biệt người theo dõi CSS mới và người dừng ở Grid 2017 — trước subgrid bài toán này chỉ giải được bằng chiều cao cứng hoặc JavaScript.