Bài 6. CSS Grid

CSS Grid chia trang thành lưới hàng và cột, lý tưởng cho bố cục tổng thể và lưới thẻ.

40 phútCơ bản
Bạn sẽ học được
  • Tạo lưới bằng grid-template-columns
  • Dùng đơn vị fr, repeat, minmax, auto-fit
  • Đặt tên vùng bằng grid-template-areas
  • Chọn Flexbox hay Grid
Thuật ngữ cần biết
Grid container
Phần tử có display:grid.
fr
Phần chia của không gian còn trống: 1fr 2fr.
Vùng (area)
Tên gọi cho một khu vực của lưới.
Track
Một hàng hoặc một cột của lưới.

Lưới cơ bản

.luoi {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}
/* ba cột, cột giữa rộng gấp đôi */

Lưới tự đáp ứng, không cần media query

.the-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

Mỗi cột rộng tối thiểu 240px; khi màn hình hẹp, số cột tự giảm.

Bố cục trang bằng vùng có tên

.trang {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "dau  dau"
    "ben  chinh"
    "chan chan";
  min-height: 100vh;
}
header { grid-area: dau; }
aside  { grid-area: ben; }
main   { grid-area: chinh; }
footer { grid-area: chan; }

@media (max-width: 700px) {
  .trang { grid-template-columns: 1fr;
    grid-template-areas: "dau" "chinh" "ben" "chan"; }
}

Flexbox hay Grid?

Tình huốngChọn
Hàng nút, thanh menu, căn giữaFlexbox
Lưới thẻ nhiều hàng nhiều cộtGrid
Bố cục tổng thể trangGrid
Nội dung quyết định kích thướcFlexbox
Kích thước theo lưới định trướcGrid

Hai kỹ thuật dùng kết hợp: Grid cho khung, Flexbox cho phần tử bên trong.

Tình huống: Thư viện ảnh

Ảnh có kích thước khác nhau nhưng muốn đều nhau:

.anh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.anh-luoi img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
Mẹo hay

Mở DevTools, bật biểu tượng "grid" cạnh phần tử để thấy đường kẻ lưới.

Lưu ý

auto-fit và auto-fill khác nhau khi còn dư chỗ: auto-fit kéo giãn cột còn lại, auto-fill giữ ô trống.

Thực hành
  1. Làm bố cục trang 4 vùng như ví dụ.
  2. Làm lưới 6 thẻ tự đáp ứng.
  3. Thử đổi vị trí vùng cho giao diện điện thoại.
Tóm tắt bài học
  • Grid cho bố cục hai chiều.
  • repeat(auto-fit, minmax()) cho lưới tự đáp ứng.
  • grid-template-areas làm bố cục dễ đọc.