CSS Grid Layout: Từ cơ bản đến layout phức tạp

Flexbox: 1 chiều (row hoặc column).

Phù hợp cho: navigation bar, card hàng ngang, căn giữa item.

Grid: 2 chiều (row + column cùng lúc).

Phù hợp cho: toàn bộ page layout, gallery ảnh, dashboard, form phức tạp.

Nguyên tắc chọn:

• Nội dung quyết định layout: Flexbox (content-out).
• Layout quyết định nội dung: Grid (layout-in).

Định nghĩa grid:

```css

.container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: auto;

gap: 20px;

}

```

Đơn vị trong Grid:

• px: Cố định.
• %: Phần trăm container.
• fr: Fraction: chia không gian còn lại. 1fr 2fr = cột 1 chiếm 1/3, cột 2 chiếm 2/3.
• auto: Tự động theo nội dung.
• minmax(200px, 1fr): Tối thiểu 200px, tối đa 1fr.
• repeat(3, 1fr): Lặp lại. Tương đương 1fr 1fr 1fr.
• repeat(auto-fit, minmax(250px, 1fr)): Responsive tự động.

Gap (khoảng cách):

gap: 20px (hàng + cột) hoặc row-gap: 10px; column-gap: 20px.

Đặt item vào vị trí cụ thể bằng line numbers:

```css

.item {

grid-column: 1 / 3; /* Từ line 1 đến line 3 */

grid-row: 1 / 2; /* Hàng 1 */

}

```

Named lines:

```css

.container {

grid-template-columns: [sidebar] 250px [main] 1fr [end];

}

.item {

grid-column: sidebar / end;

}

```

Span syntax:

• grid-column: span 2; - Chiếm 2 cột.
• grid-row: 1 / span 3; - Từ hàng 1, chiếm 3 hàng.

Sắp xếp tự động:

• grid-auto-flow: row; (default): điền từng hàng.
• grid-auto-flow: column;: điền từng cột.
• grid-auto-flow: dense;: lấp đầy khoảng trống (cẩn thận với thứ tự).

Đây là tính năng mạnh nhất của Grid: vẽ layout bằng tên area.

```css

.container {

display: grid;

grid-template-columns: 250px 1fr;

grid-template-rows: auto 1fr auto;

grid-template-areas:

'header header'

'sidebar main'

'footer footer';

gap: 20px;

}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

```

Responsive với media queries:

```css

@media (max-width: 768px) {

.container {

grid-template-columns: 1fr;

grid-template-areas:

'header'

'main'

'sidebar'

'footer';

}

}

```

Auto-fit với minmax:

```css

.gallery {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

}

```

Kết quả: 4 cột trên desktop, 2 cột trên tablet, 1 cột trên mobile. Không cần media query nào.

Auto-fill vs Auto-fit:

• auto-fill: Giữ chỗ cho cột trống.
• auto-fit: Co giãn item để lấp đầy.

Subgrid:

```css

.card {

display: grid;

grid-template-rows: subgrid;

grid-row: span 3;

}

```

Subgrid cho phép item con dùng grid lines của container cha. Hữu ích cho card components đồng bộ.

Align items trong grid cell:

• justify-items: start | end | center | stretch (căn ngang trong cell).
• align-items: start | end | center | stretch (căn dọc trong cell).
• place-items: center center: shorthand cho cả 2.

Align toàn bộ grid:

• justify-content: start | end | center | stretch | space-around | space-between | space-evenly.
• align-content: start | end | center | stretch | ....
• place-content: center center: shorthand.

Align từng item:

• justify-self và align-self ghi đè justify-items / align-items cho item cụ thể.