Làm thế nào để tạo một layout với CSS Grid?

Question

Accepted Answer

**CSS Grid** là một hệ thống layout hai chiều — nó điều khiển **hàng và cột đồng thời**, khác với một dòng duy nhất của Flexbox. Bạn định nghĩa một grid trên container và đặt các item vào đó.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 cột: cố định, rồi hai cột linh hoạt */
  grid-template-rows: auto 1fr auto;     /* 3 hàng */
  gap: 1rem;                              /* khoảng cách giữa các ô */
}
```

## Đơn vị fr và repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 cột bằng nhau */
grid-template-columns: 1fr 2fr;          /* cột 2 gấp đôi cột 1 */
```

`fr` ("fraction") phân phối không gian khả dụng — `1fr 2fr` chia theo tỷ lệ 1:2. `repeat(3, 1fr)` là cú pháp rút gọn cho ba track bằng nhau.

## Grid responsive KHÔNG cần media query

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Một dòng này tạo một grid card hoàn toàn responsive: mỗi cột rộng ít nhất `250px`; trình duyệt xếp **nhiều cột nhất có thể** trên mỗi hàng và bọc phần còn lại xuống — tự động chuyển từ 4 cột trên desktop xuống 1 cột trên mobile. `auto-fit` + `minmax` là một trong những mẫu được yêu thích nhất của Grid.

## Đặt item trải qua nhiều ô

```css
.hero {
  grid-column: 1 / 3;  /* trải từ đường cột 1 đến 3 (hai cột) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* trải 2 cột từ vị trí của nó */
```

Các item có thể trải qua nhiều hàng/cột, cho phép các layout kiểu tạp chí vốn khó với Flexbox.

## Grid vs Flexbox

- **Grid** — layout 2D (hàng *và* cột): layout trang, grid card, dashboard.
- **Flexbox** — layout 1D (một hàng hoặc cột): navbar, nhóm button, căn giữa.

Chúng kết hợp tốt với nhau — một ô grid có thể tự nó là một flex container.

## Tại sao điều này quan trọng

Grid là công cụ layout CSS mạnh nhất — nó xử lý layout toàn trang và grid card responsive một cách gọn gàng, thường thay thế các thủ thuật lồng div.

Riêng mẫu responsive `auto-fit`/`minmax` đã loại bỏ nhu cầu cho nhiều media query.