grid-template-areas và grid responsive hoạt động như thế nào?

Question

Accepted Answer

`grid-template-areas` cho phép bạn bố trí một grid một cách **trực quan** bằng cách đặt tên cho các vùng, làm cho các layout trang phức tạp dễ đọc và dễ sắp xếp lại theo responsive.

## Định nghĩa các vùng được đặt tên

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* hàng 1: header trải cả hai cột */
    "sidebar main"     /* hàng 2: sidebar | main */
    "footer  footer";  /* hàng 3: footer trải cả hai */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* gán mỗi phần tử vào một vùng đã đặt tên */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

`grid-template-areas` dạng "ASCII-art" *chính là* layout — bạn có thể thấy cấu trúc ngay lập tức, và lặp lại một tên sẽ làm một vùng trải qua nhiều ô.

## Sắp xếp lại cho mobile — chỉ cần vẽ lại bản đồ

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* một cột */
    grid-template-areas:
      "header"
      "main"      /* main giờ Ở TRÊN sidebar trên mobile */
      "sidebar"
      "footer";
  }
}
```

Để thay đổi toàn bộ layout cho mobile, bạn chỉ cần viết lại bản đồ vùng — HTML và các gán `grid-area` vẫn giữ nguyên. Cách này sạch hơn nhiều so với việc định vị lại từng phần tử riêng lẻ.

## Tại sao điều này mạnh mẽ

- **Tự mô tả** — CSS phản ánh trực quan layout được render.
- **Tách rời khỏi thứ tự source** — các phần tử có thể đặt ở bất cứ đâu bất kể thứ tự HTML (tốt để đặt `main` trước trong DOM cho accessibility, nhưng vẫn hiển thị sidebar trước về mặt thị giác).
- **Dễ reflow responsive** — đổi template vùng theo breakpoint.

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

Grid area được đặt tên làm cho layout cấp trang (header/sidebar/main/footer) vừa dễ đọc vừa dễ dàng responsive — tái cấu trúc chỉ là việc chỉnh sửa một bản đồ ASCII, không phải nối lại các vị trí.

Đây là một trong những kỹ thuật layout rõ ràng và dễ bảo trì nhất mà CSS cung cấp.