Hướng Dẫn CSS Grid

CSS Grid là hệ thống layout mạnh mẽ nhất của CSS hiện nay, cho phép xây dựng giao diện theo hàng và cột một cách trực quan. Nếu Flexbox phù hợp cho việc sắp xếp nội dung theo một chiều, thì Grid được thiết kế để xây dựng các layout hai chiều phức tạp như dashboard, landing page, admin panel và các giao diện responsive hiện đại.

---

1. CSS Grid là gì?

CSS Grid (Grid Layout) là một module layout giúp chia giao diện thành các hàng (rows) và cột (columns).

Có thể hình dung Grid giống như bảng Excel:

+-----+-----+-----+
| A   | B   | C   |
+-----+-----+-----+
| D   | E   | F   |
+-----+-----+-----+

Mỗi ô trong bảng có thể chứa nội dung độc lập.

---

2. Khi nào nên dùng Grid?

• Dashboard quản trị.
• Layout website có sidebar.
• Trang sản phẩm dạng card.
• Gallery hình ảnh.
• Landing page nhiều khu vực.
• Layout responsive phức tạp.

Quy tắc phổ biến hiện nay:

• Grid dùng để chia layout lớn.
• Flexbox dùng để căn chỉnh nội dung bên trong layout.

---

3. Container và Grid Item

Khi khai báo:

.container {
    display: grid;
}

Phần tử đó trở thành Grid Container.

Các phần tử con trực tiếp sẽ trở thành Grid Items.

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

---

4. grid-template-columns

Thuộc tính quan trọng nhất trong Grid.

Dùng để định nghĩa số lượng cột.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Kết quả:

+------+------+
|  1   |  2   |
+------+------+
|  3   |
+------+

---

5. Đơn vị fr

fr (fraction) là đơn vị đặc biệt của Grid dùng để chia phần không gian còn lại.

.container {
    grid-template-columns: 1fr 1fr 1fr;
}

Kết quả:

+---------+---------+---------+
|    1    |    2    |    3    |
+---------+---------+---------+

Ví dụ tỷ lệ

.container {
    grid-template-columns: 1fr 2fr 1fr;
}

Cột thứ 2 rộng gấp đôi hai cột còn lại.

+-----+-----------+-----+
|  1  |     2     |  3  |
+-----+-----------+-----+

---

6. repeat()

Giúp viết ngắn gọn hơn.

grid-template-columns: repeat(4, 1fr);

Tương đương:

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

---

7. Tạo Grid 3 Hàng 5 Cột

.container {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    grid-template-rows:
        repeat(3, 100px);

    gap: 10px;
}

Kết quả:

+---+---+---+---+---+
| 1 | 2 | 3 | 4 | 5 |
+---+---+---+---+---+

| 6 | 7 | 8 | 9 |10 |
+---+---+---+---+---+

|11 |12 |13 |14 |15 |
+---+---+---+---+---+

---

8. gap

Tạo khoảng cách giữa các ô.

.container {
    gap: 20px;
}

Có thể tách riêng:

row-gap: 10px;
column-gap: 20px;

---

9. grid-template-rows

Định nghĩa chiều cao các hàng.

.container {
    grid-template-rows:
        100px
        200px
        300px;
}

---

10. justify-items

Căn item theo chiều ngang trong từng ô.

.container {
    justify-items: center;
}

Giá trị:

• start
• center
• end
• stretch

---

11. align-items

Căn item theo chiều dọc trong từng ô.

.container {
    align-items: center;
}

---

12. place-items

Viết tắt của:

justify-items: center;
align-items: center;

Ví dụ:

.container {
    place-items: center;
}

---

13. grid-column

Cho phép item chiếm nhiều cột.

HTML

<div class="item big">1</div>

CSS

.big {
    grid-column: span 2;
}

Kết quả:

+-----------+-----------+
|      1                |
+-----------+-----------+

---

14. grid-row

Cho phép item chiếm nhiều hàng.

.big {
    grid-row: span 2;
}

---

15. grid-area

Đặt tên vùng cho item.

.header {
    grid-area: header;
}

---

16. grid-template-areas

Xây dựng layout theo tên vùng.

.container {
    display: grid;

    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

Kết quả:

+---------------------+
|       HEADER        |
+---------+-----------+
| SIDEBAR | CONTENT   |
+---------+-----------+
|       FOOTER        |
+---------------------+

---

17. minmax()

Cho phép xác định kích thước tối thiểu và tối đa.

grid-template-columns:
repeat(3, minmax(200px, 1fr));

Ý nghĩa:

• Nhỏ nhất: 200px
• Lớn nhất: chia đều không gian còn lại

---

18. auto-fit

Một trong những tính năng mạnh nhất của Grid.

.cards {
    display: grid;

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

    gap: 20px;
}

Grid sẽ tự động tính số lượng cột phù hợp theo kích thước màn hình.

Màn hình lớn

1 2 3 4

Tablet

1 2
3 4

Mobile

1
2
3
4

Không cần media query vẫn responsive tốt.

---

19. Ví dụ Dashboard Thực Tế

HTML

<div class="dashboard">

    <aside class="sidebar">
        Sidebar
    </aside>

    <main class="content">
        Content
    </main>

</div>

CSS

.dashboard {
    display: grid;

    grid-template-columns:
        250px 1fr;

    height: 100vh;
}

Kết quả:

+---------+------------------+
| Sidebar |     Content      |
+---------+------------------+

---

20. Tổng Kết Thuộc Tính Quan Trọng

Loại	Thuộc tính	Mục đích
Container	display: grid	Bật Grid
Container	grid-template-columns	Định nghĩa cột
Container	grid-template-rows	Định nghĩa hàng
Container	gap	Khoảng cách giữa các ô
Container	repeat()	Viết gọn số lượng cột/hàng
Container	minmax()	Kích thước tối thiểu/tối đa
Container	auto-fit	Responsive tự động
Item	grid-column	Chiếm nhiều cột
Item	grid-row	Chiếm nhiều hàng
Item	grid-area	Đặt tên vùng

---

21. Công Thức Ghi Nhớ Grid

• grid-template-columns → Có bao nhiêu cột?
• grid-template-rows → Có bao nhiêu hàng?
• fr → Chia tỷ lệ không gian.
• gap → Khoảng cách giữa các ô.
• grid-column → Chiếm thêm cột.
• grid-row → Chiếm thêm hàng.
• auto-fit + minmax → Responsive hiện đại.

Nếu Flexbox là công cụ để sắp xếp nội dung theo một chiều, thì CSS Grid là công cụ mạnh nhất để xây dựng toàn bộ layout của ứng dụng web hiện đại.