Bài 12: Sử dụng Grid layout trong Tailwind CSS

Nếu Flexbox giúp bạn sắp xếp phần tử theo hàng hoặc cột, thì Grid layout lại là công cụ mạnh mẽ để chia bố cục theo lưới hai chiều, với khả năng kiểm soát cao hơn: chia hàng, chia cột, khoảng cách giữa các ô, và tùy biến từng vùng.

Với Tailwind CSS, bạn không cần viết grid-template-columns hay grid-gap phức tạp. Bạn chỉ cần áp dụng các class như grid, grid-cols-3, gap-4… và bố cục dạng lưới sẽ hiện ra rõ ràng, trực quan.

Hôm nay, chúng ta sẽ cùng học cách:

• Tạo lưới với nhiều cột và hàng
• Điều chỉnh khoảng cách giữa các ô
• Làm layout responsive bằng grid
• Tùy chỉnh từng phần tử trong lưới

---

Nhắc lại một chút về Grid trong CSS thuần

Trong CSS truyền thống, bạn viết:

📋 Copy.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Với Tailwind, bạn chỉ cần:

📋 Copy<div class="grid grid-cols-3 gap-4">...</div>

Ngắn gọn, dễ hiểu, không cần viết file CSS riêng.

---

Các class Grid cơ bản trong Tailwind

Class	Tác dụng
grid	Kích hoạt chế độ lưới (grid layout)
grid-cols-n	Tạo lưới với n cột
grid-rows-n	Tạo lưới với n hàng
gap-n	Khoảng cách giữa các ô (hàng & cột)
gap-x-n	Khoảng cách ngang giữa các cột
gap-y-n	Khoảng cách dọc giữa các hàng
col-span-n	Một ô chiếm n cột
row-span-n	Một ô chiếm n hàng

---

Ví dụ 1: Tạo lưới 3 cột đơn giản

📋 Copy<div class="grid grid-cols-3 gap-4 p-4">
  <div class="bg-blue-100 p-4 rounded">1</div>
  <div class="bg-blue-200 p-4 rounded">2</div>
  <div class="bg-blue-300 p-4 rounded">3</div>
  <div class="bg-blue-400 p-4 rounded">4</div>
  <div class="bg-blue-500 p-4 rounded">5</div>
  <div class="bg-blue-600 p-4 rounded">6</div>
</div>

• grid-cols-3: chia thành 3 cột đều nhau
• gap-4: khoảng cách giữa các ô
• Tự động xuống hàng nếu vượt quá số cột

---

Ví dụ 2: Responsive grid – 1 cột trên mobile, 3 cột trên desktop

📋 Copy<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-4">
  <div class="bg-white shadow rounded p-6">Card 1</div>
  <div class="bg-white shadow rounded p-6">Card 2</div>
  <div class="bg-white shadow rounded p-6">Card 3</div>
</div>

• grid-cols-1: trên mobile hiển thị 1 cột
• md:grid-cols-3: từ tablet trở lên hiển thị 3 cột
• Rất tiện cho các layout sản phẩm, bài viết, ảnh…

---

Ví dụ 3: Một phần tử chiếm nhiều cột

📋 Copy<div class="grid grid-cols-3 gap-4 p-4">
  <div class="col-span-2 bg-green-200 p-4 rounded">Chiếm 2 cột</div>
  <div class="bg-green-400 p-4 rounded">Chiếm 1 cột</div>
  <div class="col-span-3 bg-green-600 p-4 rounded">Chiếm cả hàng</div>
</div>

• col-span-2: chiếm 2/3 cột
• col-span-3: chiếm toàn bộ hàng

---

So sánh nhanh: Grid vs Flex

Tình huống	Dùng Flex	Dùng Grid
Canh hàng/dòng đơn giản	Có	Không
Chia layout dạng bảng 2 chiều	Không	Có
Giao diện card, sản phẩm, gallery ảnh	Có	Có
Điều chỉnh từng phần tử theo hàng/cột	Không (khó làm)	Có (dễ hơn)
Responsive layout đa cột	Có	Có

---

Tổng kết kiến thức

Class	Tác dụng
grid	Kích hoạt lưới
grid-cols-3	Tạo 3 cột
gap-4	Tạo khoảng cách đều giữa các ô
col-span-2	Một ô chiếm 2 cột
md:grid-cols-1	Responsive: đổi số cột theo màn hình

---

Tóm tắt bài học

• Grid layout là công cụ mạnh để chia bố cục dạng bảng nhiều hàng nhiều cột.
• Tailwind cung cấp cú pháp đơn giản như grid-cols-3, gap-4, col-span-2…
• Grid rất phù hợp khi cần layout dạng gallery, bảng sản phẩm, blog list, hoặc khu vực content phức tạp.

---

Giờ bạn đã làm chủ hai công cụ bố cục mạnh mẽ: Flex và Grid. Nhưng trong layout thực tế, bạn còn cần điều chỉnh những thứ như:

• Hiển thị hay ẩn phần tử theo tình huống
• Xử lý thứ tự hiển thị, độ sâu (z-index)
• Làm cho layout chồng lớp, nổi lên, ẩn xuống…

Tất cả những điều đó sẽ được giới thiệu trong bài 13: Các lớp hiển thị – display, visibility, z-index trong Tailwind CSS.

---

Bạn đã sẵn sàng để điều khiển cái gì hiện – cái gì ẩn – cái gì nổi lên trên chưa?
Hẹn gặp bạn trong bài tiếp theo!