CSS Subgrid Generator

Tính năng nổi bật

• Ba mẫu subgrid: theo hàng (card), theo cột (form), cả hai chiều
• Sinh grid-template-rows: subgrid và/hoặc grid-template-columns: subgrid đúng với item con span đủ số track
• Tự thêm grid-row: span N hoặc grid-column: 1 / -1 để item con phủ đúng các track cần kế thừa
• Sinh kèm HTML mẫu khớp với số cột, số hàng đã chọn
• Sinh khối @supports not (...) dự phòng cho trình duyệt cũ
• Xem trước trực tiếp bằng chính các thuộc tính CSS đã sinh, cập nhật ngay khi đổi thông số
• Tùy chỉnh gap (rem) của grid cha, card mẫu ghi đè row-gap bên trong
• Kiểm tra đầu vào: số cột, số hàng là số nguyên từ 1 đến 12
• Export CSS với comments giải thích tiếng Việt
• Copy riêng CSS và HTML bằng một cú bấm
• Tương thích với code CSS Grid hiện có
• Hoàn toàn miễn phí, copy & dùng ngay

CSS Subgrid giải quyết vấn đề nested grid alignment

Trước CSS Subgrid, khi có grid cha và grid con, items trong grid con KHÔNG thể align với items của grid con bên cạnh. Ví dụ: 3 cards (header, body, footer), nếu header card 1 dài hơn header card 2, phần body và footer của các card sẽ lệch nhau. Developers phải dùng JavaScript đo chiều cao, hoặc đặt chiều cao cố định rồi cắt chữ - khó bảo trì. Với Subgrid, grid con dùng lại track của grid cha: .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; } - các headers, bodies, footers tự động thẳng hàng qua tất cả cards trên cùng một dòng. Use case khác: nhãn form cùng độ rộng qua nhiều dòng, dashboard widgets cùng baseline, product grids với nút mua thẳng hàng. Subgrid biến CSS Grid từ 'mạnh' thành 'hoàn chỉnh' cho bố cục lồng nhau.

Lợi ích khi sử dụng

• •Align items hoàn hảo qua nhiều grid items
• •Loại bỏ JavaScript height-matching hacks
• •HTML gọn - giữ đúng cấu trúc ngữ nghĩa card, không cần làm phẳng DOM
• •Responsive tự động khi parent grid thay đổi số cột
• •Tận dụng CSS Grid skills đã có
• •Không tốn JavaScript đo đạc lại mỗi khi nội dung hay kích thước màn hình đổi
• •Maintainable - logic align ở CSS thuần
• •Compatible với CSS Grid hiện tại, không phá layout cũ

Hướng dẫn tạo CSS Subgrid layout với công cụ

1. 1Chọn kiểu subgrid: theo hàng cho card thẳng hàng, theo cột cho form thẳng cột, hoặc cả hai chiều
2. 2Nhập số cột của grid cha (Parent Columns), từ 1 đến 12
3. 3Nhập số hàng mỗi card chiếm (kiểu theo hàng) hoặc số dòng form (kiểu theo cột), tương ứng số phần tử con trực tiếp của mỗi item
4. 4Chỉnh gap của grid cha theo rem nếu cần
5. 5Xem phần Xem trước: ô đầu tiên có nội dung dài hơn để bạn thấy các hàng tương ứng ở card khác giãn theo
6. 6Copy CSS và HTML mẫu, đổi tên lớp .parent-grid, .child-subgrid theo dự án của bạn
7. 7Giữ khối @supports nếu dự án còn phải chạy trên trình duyệt cũ
8. 8Kiểm tra bằng lớp phủ Grid trong DevTools của trình duyệt

Use case thực tế: Card grid với header/body/footer aligned

Pattern phổ biến: product cards trên trang thương mại điện tử với tên sản phẩm (1-3 dòng), mô tả (2-4 dòng), giá và nút mua. Không có subgrid: nếu tên sản phẩm ở card 1 dài hơn, phần mô tả và nút mua của card 1 sẽ thấp hơn các card khác - layout lộn xộn. Có subgrid: HTML: <div class='grid'><article><h3>Title</h3><p>Desc</p><div>Price</div><button>Buy</button></article>...</div>. CSS: .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .grid > article { display: grid; grid-row: span 4; grid-template-rows: subgrid; }. Grid cha tự tạo các hàng ngầm định, mỗi nhóm 4 hàng cho một dòng card; mỗi hàng cao bằng phần tử cao nhất trong hàng đó ở mọi card. Kết quả: tất cả tên sản phẩm cùng vùng, tất cả mô tả cùng vùng, tất cả nút mua cùng đáy. Căn thẳng hàng hoàn hảo không cần JavaScript.

Giải thích từng dòng code mặc định (3 cột, 3 hàng, gap 1rem)

Với cài đặt mặc định, công cụ sinh .parent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } và .child-subgrid { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.5rem; }. minmax(0, 1fr) thay vì 1fr để cột không bị nội dung dài (URL, từ không ngắt) kéo rộng ra. Trong container rộng 960 px, mỗi cột rộng (960 - 2 x 16) / 3 = 309,33 px. grid-row: span 3 khiến mỗi card chiếm 3 hàng liên tiếp; với 6 card trong 3 cột, grid cha có 2 dòng card x 3 hàng = 6 hàng ngầm định. grid-template-rows: subgrid khiến 3 phần tử con của card nằm đúng trên 3 hàng đó. Nếu header card 1 có 2 dòng chữ (48 px) còn header card 2, card 3 chỉ 1 dòng (24 px), hàng header cao 48 px cho cả ba card, nên phần body của cả ba bắt đầu cùng một vị trí. row-gap: 0.5rem trên subgrid thay khoảng cách giữa các hàng bên trong card, còn khoảng cách giữa hai dòng card vẫn là gap 1rem của grid cha.

Ba quy tắc bắt buộc và lỗi hay gặp khi viết subgrid

Thứ nhất, phần tử dùng subgrid phải là con trực tiếp (grid item) của grid cha và bản thân nó phải có display: grid; thiếu một trong hai thì giá trị subgrid bị bỏ qua. Thứ hai, item phải span đúng số track muốn kế thừa: grid-row: span 3 cho 3 hàng, hoặc grid-column: 1 / -1 để trải hết các cột tường minh. Nếu quên span, item chỉ chiếm 1 track và mọi phần tử con dồn vào đó. Thứ ba, theo chiều đã khai báo subgrid, grid con không tự tạo thêm track ngầm định: nếu card span 3 hàng mà có 4 phần tử con, phần tử thứ tư bị đặt chồng vào track cuối thay vì xuống hàng mới. Vì vậy số phần tử con trực tiếp của mỗi card nên bằng đúng số hàng span; nội dung phụ hãy bọc chung vào một phần tử. Một lỗi nữa là dùng grid-column: 1 / -1 khi grid cha chỉ định nghĩa cột bằng grid-auto-columns: -1 chỉ tính trên các đường kẻ tường minh, nên hãy khai báo grid-template-columns.

Hỗ trợ trình duyệt năm 2026 và cách viết dự phòng

Firefox hỗ trợ subgrid từ bản 71 (12/2019), Safari từ bản 16 (9/2022), Chrome và Edge từ bản 117 (9/2023). Kể từ khi Chrome 117 phát hành, subgrid có mặt trên cả ba bộ máy hiển thị chính và được Baseline xếp vào nhóm 'widely available' sau mốc 30 tháng, tức khoảng đầu năm 2026. Trên thực tế, nhóm còn thiếu là máy dùng trình duyệt không cập nhật, ví dụ iPhone kẹt ở iOS 15 hoặc WebView cũ trong một số ứng dụng. Hãy kiểm tra tỷ lệ trên caniuse.com và số liệu truy cập của chính website trước khi quyết định. Khối dự phòng @supports not (grid-template-rows: subgrid) { ... } mà công cụ sinh ra giữ cho card vẫn hiển thị bình thường, chỉ mất phần căn thẳng hàng giữa các card, đây là kiểu xuống cấp nhẹ nhàng (graceful degradation).

Subgrid vs Flexbox vs CSS Grid thuần

Flexbox: 1 chiều (hàng HOẶC cột), không chia sẻ track giữa các phần tử anh em - phải đặt chiều cao cố định. CSS Grid thuần: 2 chiều, nhưng grid lồng bên trong KHÔNG chia sẻ track với grid cha. Subgrid: phần mở rộng của Grid, grid con dùng chung track với grid cha. Khi nào dùng: Flexbox cho bố cục 1 chiều đơn giản (thanh điều hướng, nhóm nút). Grid cho bố cục 2 chiều độc lập. Subgrid khi cần CĂN THẲNG HÀNG xuyên qua các cấp lồng nhau. Maintenance: Subgrid gọn hơn nhiều so với giải pháp đo chiều cao bằng JavaScript.

Subgrid khác gì display: contents

Trước khi có subgrid, một mẹo phổ biến là đặt display: contents cho card để các phần tử con 'nhảy' thẳng lên làm grid item của grid cha. Cách này cũng căn thẳng hàng được, nhưng card mất hộp riêng: không có nền, viền, bo góc, padding hay bóng đổ, và ở một số trình duyệt cũ còn làm mất vai trò ngữ nghĩa của phần tử với trình đọc màn hình. Subgrid giữ card là một hộp thật, vẫn trang trí được, trong khi các phần tử con vẫn bám theo track của grid cha. Padding và viền của subgrid được tính như lề thêm cho các phần tử ở mép, nên nội dung vẫn thẳng hàng giữa các card có cùng padding.

Các bước viết CSS Subgrid thủ công

Nếu muốn tự viết thay vì dùng công cụ: Định nghĩa parent grid: display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)). Chọn child element làm subgrid (ví dụ: .card). Đặt .card { display: grid; grid-template-rows: subgrid }. Đặt grid-row: span N (N = số hàng muốn kế thừa, bằng số phần tử con của card). Có thể subgrid cả cột: grid-template-columns: subgrid kèm grid-column: 1 / -1. Thêm phần tử con vào .card - chúng bám theo track của grid cha. Kiểm tra kết quả - các phần tử thẳng hàng qua tất cả card. Copy CSS và dán vào stylesheet. Subgrid cũng nhận thêm tên đường kẻ, ví dụ grid-template-columns: subgrid [label] [field], và kế thừa luôn tên đường kẻ đã đặt ở grid cha.

Giới hạn của công cụ

Công cụ sinh ba mẫu phổ biến nhất với số cột, số hàng từ 1 đến 12 và một giá trị gap. Công cụ không có trình kéo thả để đặt item vào vị trí tùy ý, không sinh grid-template-areas, không sinh @media cho responsive và không gắn tên đường kẻ. Với responsive, bạn chỉ cần đổi grid-template-columns của grid cha trong @media (ví dụ từ 3 cột xuống 1 cột trên điện thoại), phần subgrid tự thích ứng. Kiểu theo cột dùng max-content cho cột đầu để nhãn dài nhất quyết định độ rộng cột nhãn; nếu nhãn rất dài, hãy đổi thành minmax(0, 12rem) hoặc giá trị phù hợp.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• css subgrid generator
• css subgrid example
• css nested grid
• css grid level 2
• subgrid card alignment
• css subgrid support
• subgrid form layout
• css grid track inheritance
• subgrid responsive
• grid-template-rows subgrid
• grid-template-columns subgrid
• css subgrid browser support 2026
• subgrid fallback @supports
• card cao bằng nhau css
• căn thẳng hàng card css grid
• subgrid tailwind
• subgrid vs display contents
• css grid lồng nhau