Subgrid: Layout phức tạp trở nên đơn giản
CSS Subgrid cho phép child elements align theo grid tracks của parent, giải quyết bài toán alignment trong nested layouts mà trước đây rất khó xử lý.
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.
Admin
Bình luận (0)
Đăng nhập để bình luận
Chưa có bình luận nào. Hãy là người đầu tiên!