Trình bày cách sử dụng CSS Subgrid để giải quyết bài toán căn chỉnh các khối nội dung phức tạp có chiều cao thay đổi trong các component dạng thẻ (Card Components).

Question

Accepted Answer

Trong các trang thương mại điện tử hoặc bảng điều khiển quản trị, các thẻ (Cards) thường chứa tiêu đề, mô tả và nút bấm có độ dài văn bản khác nhau. Điều này khiến các nút bấm ở đáy thẻ bị lệch nhau nếu sử dụng Flexbox thông thường cho từng thẻ riêng lẻ.
Bản chất cơ chế
CSS Subgrid là một tính năng nâng cao của CSS Grid cho phép một phần tử con nằm trong một Grid Container cũng tham gia vào hệ thống lưới của Grid cha thay vì tạo ra hệ thống lưới hoàn toàn độc lập.
Khi một Card nằm trong Grid chính, ta có thể thiết lập Card đó cũng là một Grid và sử dụng grid-template-rows: subgrid, giúp các thành phần bên trong Card (như Tiêu đề, Mô tả, Nút bấm) tự động khóa thẳng hàng với các Card khác trên cùng một hàng.
Ví dụ mã nguồn minh họa
.product-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto; /* Tiêu đề, Mô tả, Nút bấm */
  gap: 20px;
}

.product-card {
  display: grid;
  grid-row: span 3; /* Chiếm trọn 3 hàng của lưới cha */
  grid-template-rows: subgrid;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 16px;
}

.product-button {
  align-self: end; /* Đảm bảo nút bấm luôn nằm đáy */
}
Lưu ý kinh nghiệm thực chiến

Trước khi sử dụng Subgrid, cần kiểm tra khả năng tương thích của trình duyệt trên các thiết bị cũ (Browser Support), mặc dù hiện tại các trình duyệt hiện đại (Chrome, Safari, Firefox) đều đã hỗ trợ hoàn toàn.
Đối với các trình duyệt không hỗ trợ, luôn cần cung cấp mã nguồn dự phòng (Fallbacks) sử dụng Flexbox cơ bản để tránh lỗi hiển thị giao diện trắng xóa.

Trình bày cách sử dụng CSS Subgrid để giải quyết bài toán căn chỉnh các khối nội dung phức tạp có chiều cao thay đổi trong các component dạng thẻ (Card Components).

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi css liên quan cùng chủ đề