CSS Grid Layout - Tổng quan mô-đun bố cục lưới

CSS Grid Layout là mô-đun bố cục 2 chiều (hai chiều) mạnh mẽ nhất của CSS, cho phép kiểm soát chính xác cả hàng (rows) và cột (columns) cùng lúc.

Các khái niệm cốt lõi

Khái niệm	Mô tả
Grid Container	Phần tử cha có `display: grid`
Grid Items	Các phần tử con trực tiếp
Grid Lines	Đường ngang (row lines) và dọc (column lines) ranh giới
Grid Tracks	Hàng (row tracks) và cột (column tracks) - không gian giữa 2 lines
Grid Cells	Ô đơn lẻ (giao của 1 hàng 1 cột)
Grid Areas	Khu vực hình chữ nhật bao gồm nhiều cells
Grid Gaps	Khoảng cách giữa tracks (`gap`, `row-gap`, `column-gap`)

Grid Container Properties (Tóm tắt)

.grid-container {
  display: grid;
  /* Explicit tracks */
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: auto 1fr auto;
  /* Hoặc named areas */
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  /* Implicit tracks */
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  /* Alignment */
  gap: 1.5rem;
  justify-content: center;
  align-content: center;
}

Grid Item Properties (Tóm tắt)

.grid-item {
  /* Line-based placement */
  grid-column: 1 / 3;      /* Cột 1 đến 3 */
  grid-row: 1 / span 2;    /* Hàng 1, trải 2 hàng */
  /* Area-based placement */
  grid-area: header;       /* Tên từ grid-template-areas */
  /* Alignment trong cell */
  justify-self: center;
  align-self: center;
  /* Layer */
  z-index: 1;
}

Flexbox vs Grid: Khi nào dùng?

Flexbox (1D)	Grid (2D)
Layout 1 chiều: hàng HOẶC cột	Layout 2 chiều: hàng VÀ cột
Content-driven (items quyết định)	Layout-driven (container quyết định)
Navbar, form, card, centering	Page layout, dashboard, gallery, calendar
Items wrap tự nhiên	Tracks định nghĩa rõ ràng

Browser Support

Hỗ trợ hoàn hảo tất cả trình duyệt hiện đại (Chrome 57+, Firefox 52+, Safari 10+, Edge 16+). IE11 hỗ trợ phiên bản cũ (-ms-grid).