Bài 6. CSS Grid

Khái niệm và lý thuyết

Grid chia không gian thành lưới gồm các đường kẻ, rãnh (track) là hàng hoặc cột giữa hai đường, ô là giao của một hàng và một cột, và vùng là tập các ô. Khác Flexbox, Grid định nghĩa khung từ container trước rồi mới đặt item vào, nên rất mạnh cho bố cục tổng thể.

Đơn vị fr là phần chia của không gian còn lại: 1fr 2fr chia 1/3 và 2/3. Hàm repeat(auto-fit, minmax(240px, 1fr)) tạo số cột tự động theo chiều rộng, mỗi cột tối thiểu 240px, đây là kỹ thuật bố cục đáp ứng không cần media query.

Hai công cụ bổ sung nhau và thường lồng vào nhau: Grid dựng khung trang, Flexbox căn chỉnh nội dung bên trong từng ô.

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?

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

.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; }