Trình tạo CSS Grid

Vùng chứa được tạo

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): ba cột chia đều chiều rộng có sẵn. 1fr là một phần của không gian còn lại; minmax(0, 1fr) cho phép cột co nhỏ hơn kích thước nội dung.
• gap: khoảng cách giữa mỗi track.
• Media query chuyển sang repeat(auto-fit, minmax(220px, 1fr)), tạo càng nhiều cột càng tốt, mỗi cột rộng tối thiểu 220px. Điểm ngắt là số cột nhân với chiều rộng tối thiểu (với mức sàn 120px), nên trên màn hình nhỏ lưới xuống dòng mới thay vì bị nén lại.

Đơn vị fr

fr nghĩa là “một phần của không gian còn lại”: sau khi trừ các track có kích thước cố định, không gian còn lại được chia cho tổng số đơn vị fr.

grid-template-columns: 200px 1fr 2fr;

Trên vùng chứa 1000px, cột đầu tiên chiếm 200px và 800px còn lại chia theo tỷ lệ 1:2, tức 267px và 533px.

auto-fill so với auto-fit

• auto-fill: tạo các track trống bù chỗ khi không đủ phần tử.
• auto-fit: thu các track trống về 0, để các phần tử còn lại giãn ra lấp đầy hàng.

Dự phòng thích ứng dùng auto-fit, đúng thứ lưới thẻ cần: hàng luôn trông đầy đặn.

Các cột có chiều rộng khác nhau

Trình tạo tạo ra các cột đều nhau. Hãy sửa kết quả để trộn kích thước: grid-template-columns: 200px 1fr 2fr; cho thanh bên cố định và hai cột linh hoạt theo tỷ lệ 1:2. Với vùng có tên (grid-template-areas) hoặc đặt phần tử tường minh (grid-column: 1 / 3), hãy thêm các quy tắc đó bằng tay lên trên vùng chứa đã tạo.

Grid so với Flexbox

• Grid: bố cục 2D tường minh với các track. Phù hợp khi bố cục có cấu trúc hàng và cột (khung trang, thư viện, bảng điều khiển).
• Flexbox: căn chỉnh 1D dọc theo một trục duy nhất. Phù hợp khi các phần tử chảy tự nhiên (thanh điều hướng, hàng nút bấm).

Bố cục thực tế thường kết hợp cả hai: Grid cho khung trang, Flexbox bên trong các thành phần.

Lỗi thường gặp

• Quên min-width: 0 trên phần tử con: phần tử lưới mặc định dùng chiều rộng tối thiểu của nội dung, khiến cột fr không thể co nhỏ hơn từ dài nhất. Đặt min-width: 0 cho phần tử con để chúng co được.
• Lồng nhau mà không có display: grid: phần tử con của lưới không tự trở thành lưới trừ khi bạn khai báo.