CSS Grid là gì? Hướng dẫn layout 2D từ cơ bản đến nâng cao

CSS Grid là gì?

Bạn đã biết Flexbox nhưng vẫn khó tạo layout tổng thể của trang (header, sidebar, content, footer)? CSS Grid chính là giải pháp – hệ thống layout 2 chiều mạnh nhất của CSS.

CSS Grid là gì?

CSS Grid Layout là hệ thống layout 2 chiều (2D) của CSS, cho phép tạo bố cục phức tạp dựa trên cả hàng (rows) và cột (columns) cùng lúc.

Hãy tưởng tượng bàn cờ vua – có hàng và cột rõ ràng. CSS Grid hoạt động tương tự, cho phép đặt các phần tử vào đúng vị trí mong muốn trong "bàn cờ" đó.

┌──────────────────────────────┐
│          HEADER              │
├────────┬─────────────────────┤
│        │                     │
│SIDEBAR │      CONTENT        │
│        │                     │
├────────┴─────────────────────┤
│          FOOTER              │
└──────────────────────────────┘

CSS Grid vs Flexbox: Dùng khi nào?

Tiêu chí	CSS Grid	Flexbox
Số chiều	2D (hàng + cột)	1D (hàng hoặc cột)
Dùng cho	Layout tổng thể trang	Component, navigation
Kiểm soát	Từ container (toàn bộ)	Container + từng item

Thực tế: Dùng cả hai trong cùng một dự án. Grid cho layout chính, Flexbox cho từng component nhỏ.

Tìm hiểu thêm: Flexbox CSS

Cú pháp cơ bản của CSS Grid

display: grid

.container {
  display: grid; /* Bật Grid Layout */
}

grid-template-columns – Định nghĩa cột

.container {
  /* 3 cột bằng nhau */
  grid-template-columns: repeat(3, 1fr);
  
  /* Sidebar cố định + content linh hoạt */
  grid-template-columns: 250px 1fr;
  
  /* Tự động số cột, mỗi cột tối thiểu 200px */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Đơn vị fr – "Phần không gian còn lại"

/* 1fr = 1 phần, 2fr = 2 phần */
grid-template-columns: 1fr 2fr 1fr;
/* Kết quả: 25% | 50% | 25% */

gap – Khoảng cách giữa các ô

.container {
  gap: 16px;            /* hàng và cột đều 16px */
  gap: 16px 24px;       /* hàng 16px, cột 24px */
}

Thuộc tính của Grid Item

grid-column và grid-row

/* Chiếm 2 cột */
.item {
  grid-column: span 2;
  
  /* Hoặc chỉ định vị trí cụ thể */
  grid-column: 1 / 3; /* từ đường 1 đến đường 3 */
}

Grid Template Areas – Kỹ thuật đặt tên vùng (Cực hay!)

Đây là kỹ thuật mạnh nhất của CSS Grid – bạn đặt tên cho từng vùng và chỉ cần "vẽ" layout bằng text:

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

<div class="container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Content</main>
  <footer class="footer">Footer</footer>
</div>

Chỉ cần nhìn vào grid-template-areas là biết ngay layout trông như thế nào!

minmax() – Responsive Grid không cần Media Query

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Kết quả:

• Màn hình lớn: 4–5 cột tự động
• Tablet: 2–3 cột
• Mobile: 1 cột
• Không cần viết media query!

Muốn kết hợp với Responsive Design? Xem thêm: Responsive Design là gì?

Ví dụ thực tế 1: Layout trang web hoàn chỉnh

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 70px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header;  background: #333; color: white; padding: 0 24px; display: flex; align-items: center; }
.sidebar { grid-area: sidebar; background: #f5f5f5; padding: 20px; }
.main    { grid-area: main;    padding: 24px; }
.footer  { grid-area: footer;  background: #333; color: white; text-align: center; }

/* Responsive: mobile */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Ví dụ thực tế 2: Card Gallery Responsive

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 16px;
}

/* Card nổi bật chiếm 2 cột */
.card.featured {
  grid-column: span 2;
}

Câu hỏi thường gặp (FAQ)

CSS Grid có thay thế hoàn toàn Flexbox không?

Không. Grid (2D) và Flexbox (1D) bổ sung cho nhau. Hầu hết dự án dùng cả hai: Grid cho layout chính, Flexbox cho các component nhỏ bên trong.

Internet Explorer có hỗ trợ CSS Grid không?

IE11 chỉ hỗ trợ một phần cú pháp cũ. Tuy nhiên, IE đã bị Microsoft ngừng hỗ trợ từ 2022. Tất cả trình duyệt hiện đại (Chrome, Firefox, Safari, Edge) đều hỗ trợ đầy đủ.

CSS Grid có khó học không?

Các thuộc tính cơ bản (display: grid, grid-template-columns, gap) có thể nắm trong 30 phút. grid-template-areas làm mọi thứ trực quan hơn rất nhiều.