Grid template areas là gì?

grid-template-areas cho phép vẽ bố cục bằng chữ rồi gán item vào từng vùng theo tên.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header  header'
    'sidebar main'
    'footer  footer';
  min-height: 100dvh;
}

.page > header { grid-area: header; }
.page > aside  { grid-area: sidebar; }
.page > main   { grid-area: main; }
.page > footer { grid-area: footer; }

Đổi bố cục cho mobile chỉ cần vẽ lại bức tranh, không đụng tới từng item:

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: 'header' 'main' 'sidebar' 'footer';
  }
}

Dùng dấu . cho ô cố ý để trống:

grid-template-areas: 'a . b';

Lưu ý 1: mỗi chuỗi phải có cùng số ô, và vùng cùng tên phải tạo thành hình chữ nhật liền mạch — nếu không toàn bộ khai báo bị bỏ qua, im lặng không báo lỗi.

Lưu ý 2: tên vùng không đặt trong dấu nháy riêng — cả một hàng là một chuỗi.

Chốt: đây là cách viết grid dễ đọc nhất khi review code — nhìn phần khai báo là thấy ngay bố cục, không phải dò grid-column: 1 / 3 của từng element.