CSS Grid vs Flexbox: Khi nào nên dùng cái nào?
Giới thiệu
Flexbox và Grid là hai hệ thống layout mạnh mẽ trong CSS hiện đại. Mặc dù cả hai đều giúp tạo các bố cục phức tạp, nhưng chúng được thiết kế để giải quyết các vấn đề khác nhau. Bài viết này sẽ giúp bạn hiểu khi nào nên sử dụng Flexbox và khi nào nên sử dụng Grid.
Flexbox là gì?
Flexbox (Flexible Box Layout) là một phương pháp bố trí một chiều, có nghĩa là nó xử lý layout theo một trục duy nhất (ngang hoặc dọc).
css
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}Ưu điểm của Flexbox
- Đơn giản hóa việc căn chỉnh: Dễ dàng căn giữa, căn trái, phải, trên, dưới
- Thứ tự linh hoạt: Thay đổi thứ tự các phần tử không cần thay đổi HTML
- Phân phối không gian: Phân chia không gian một cách thông minh
Ví dụ Flexbox
Một thanh điều hướng đơn giản:
html
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="menu">
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Sản phẩm</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.menu {
display: flex;
list-style: none;
gap: 1rem;
}Grid là gì?
CSS Grid là hệ thống bố trí hai chiều, cho phép bạn quản lý cả hàng và cột cùng một lúc.
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
}Ưu điểm của Grid
- Bố cục hai chiều: Kiểm soát đồng thời cả hàng và cột
- Định vị chính xác: Đặt các phần tử ở vị trí chính xác trong lưới
- Bố cục phức tạp: Tạo các layout phức tạp dễ dàng hơn
- Overlap: Cho phép các phần tử chồng lên nhau
Ví dụ Grid
Một gallery hình ảnh:
html
<div class="gallery">
<div class="gallery-item">Item 1</div>
<div class="gallery-item">Item 2</div>
<div class="gallery-item">Item 3</div>
<div class="gallery-item">Item 4</div>
<div class="gallery-item">Item 5</div>
<div class="gallery-item">Item 6</div>
</div>css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: minmax(200px, auto);
gap: 20px;
}
.gallery-item {
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
}So sánh: Khi nào nên sử dụng cái nào?
Sử dụng Flexbox khi:
- Bạn cần một bố cục một chiều (hàng hoặc cột)
- Bạn cần căn chỉnh các phần tử (căn giữa, căn trái, phải)
- Bạn có một nhóm nhỏ các phần tử với kích thước không đồng đều
- Bạn cần tạo một thanh điều hướng hoặc menu
- Bạn cần căn chỉnh các phần tử bên trong một container
css
/* Ví dụ Flexbox cho menu ngang */
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}Sử dụng Grid khi:
- Bạn cần một bố cục hai chiều (hàng và cột)
- Bạn có một bố cục phức tạp với nhiều hàng và cột
- Bạn cần kiểm soát cả hai trục một cách chính xác
- Bạn cần tạo một bố cục trang hoàn chỉnh
- Bạn cần các phần tử chồng lên nhau
css
/* Ví dụ Grid cho layout trang */
.page-layout {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}Kết hợp Flexbox và Grid
Trong nhiều trường hợp, kết hợp cả hai kỹ thuật sẽ mang lại kết quả tốt nhất.
css
/* Grid cho layout tổng thể */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Flexbox cho nội dung bên trong mỗi item */
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
}Ví dụ thực tế: Dashboard Layout
html
<div class="dashboard">
<header class="header">Header</header>
<nav class="sidebar">Sidebar</nav>
<main class="content">
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</main>
<footer class="footer">Footer</footer>
</div>css
/* Grid cho layout tổng thể */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
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;
}
/* Flexbox cho container của card */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
display: flex;
flex-direction: column;
}Kết luận
Không có câu trả lời đúng hay sai tuyệt đối khi lựa chọn giữa Flexbox và Grid. Mỗi công cụ có điểm mạnh riêng và được thiết kế để giải quyết các vấn đề khác nhau:
- Flexbox tuyệt vời cho bố cục một chiều và căn chỉnh nội dung.
- Grid mạnh mẽ cho bố cục hai chiều phức tạp.
Hiểu rõ cả hai và biết khi nào sử dụng cái nào sẽ giúp bạn tạo ra các layout web hiệu quả và dễ bảo trì hơn.
