Thiết Kế Website Chuẩn Xịn : Bố Cục CSS Masonry & CSS Grid Là Gì?
Masonry và CSS Grid là hai cách phổ biến để tạo bố cục hiện đại, dễ điều chỉnh, đặc biệt phù hợp khi xây dựng gallery ảnh, layout sản phẩm hoặc danh sách bài viết blog.
1. Masonry Layout Là Gì?
Masonry là kiểu bố cục xếp các khối nội dung giống như gạch xây, không đều chiều cao, được sắp xếp tự động để tận dụng không gian một cách tối ưu mà không để lại khoảng trắng lớn.
<div class="masonry">
<div class="item">Nội dung 1</div>
<div class="item">Nội dung 2</div>
<div class="item">Nội dung 3</div>
</div>
<style scoped>
.masonry {
column-count: 3;
column-gap: 1em;
}
.masonry .item {
break-inside: avoid;
margin-bottom: 1em;
padding: 1em;
background: #f9f9f9;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
.masonry { column-count: 2; }
}
@media (max-width: 480px) {
.masonry { column-count: 1; }
}
</style>
✅ Ưu điểm:
- Triển khai đơn giản bằng CSS thuần
- Hiển thị đẹp cho nội dung có chiều cao khác nhau
⚠️ Nhược điểm:
- Không kiểm soát được vị trí item theo hàng
- Không phải “masonry thật sự” như JavaScript layout engine
2. CSS Grid Layout Là Gì?
CSS Grid là module mạnh mẽ giúp chia bố cục rõ ràng theo hàng – cột. Bạn có thể kiểm soát chính xác vị trí, kích thước và cấu trúc từng phần tử trong layout.
<div class="grid">
<div class="grid-item">Item A</div>
<div class="grid-item">Item B</div>
<div class="grid-item">Item C</div>
<div class="grid-item">Item D</div>
</div>
<style scoped>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1em;
}
.grid-item {
padding: 1em;
background: #e0f7fa;
border: 1px solid #4dd0e1;
border-radius: 6px;
text-align: center;
}
</style>
✅ Ưu điểm:
- Dễ dàng thiết kế layout rõ ràng, có cấu trúc
- Kiểm soát tốt từng phần tử, linh hoạt kết hợp với Flexbox
⚠️ Nhược điểm:
- Không tự động lấp đầy các ô trống nếu item có chiều cao khác nhau
3. So Sánh Nhanh
| Tiêu chí | Masonry (CSS Columns) | CSS Grid |
|---|---|---|
| Chiều cao biến đổi | ✔️ | ❌ |
| Kiểm soát vị trí chính xác | ❌ | ✔️ |
| Độ phức tạp | ⭐ | ⭐⭐ |
| Responsive | ✔️ (Column-count) | ✔️ (auto-fill/auto-fit) |
4. Khi Nào Nên Dùng?
- Dùng Masonry nếu bạn cần bố cục đẹp mắt cho ảnh, bài viết hoặc sản phẩm có chiều cao không đồng đều.
- Dùng CSS Grid nếu bạn cần bố cục chính xác, kiểm soát chi tiết từng phần tử trong lưới.
💡 Mẹo: Bạn có thể kết hợp Grid + Flexbox để có bố cục mạnh mẽ nhất trong các dự án web hiện đại.
💡 Mọi Trải Nghiệm Trong Nhà Đều Bắt Đầu Từ Sự Tinh Tế. 👇
