kemntas
06-12-2025, 01:31 PM
Khi nói đến việc tạo bố cục trang web hiện đại theo dạng hàng + cột, không công cụ nào mạnh bằng CSS Grid Layout. Đây là module giúp bạn xây cấu trúc trang một cách trực quan, gọn gàng và cực kỳ linh hoạt mà không cần lồng nhiều div như trước.
🎯 CSS Grid là gì?CSS Grid là hệ thống bố cục 2 chiều (two-dimensional layout), cho phép bạn kiểm soát đồng thời chiều ngang (columns) và chiều dọc (rows).
Khác với Flexbox chỉ mạnh về 1 chiều, Grid đặc biệt phù hợp cho:
Layout trang chủ
Giao diện dashboard
Gallery hình ảnh
Bố cục nhiều cột phức tạp
Form nhiều hàng – nhiều cột
🔧 Cách kích hoạt Grid
.container {
display: grid;
}
Khi đã kích hoạt Grid, bạn có thể xác định số hàng, số cột, kích thước, khoảng cách và cách phần tử tự động lấp đầy không gian.
🧱 Tạo lưới cơ bản1. Tạo 3 cột bằng nhau
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
2. Tạo layout 2 cột không đều
grid-template-columns: 1fr 2fr;
🔥 Auto-fit & Auto-fill – Tự động responsive không cần media queries
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
Giải thích:
minmax(200px, 1fr) → mỗi item nhỏ nhất 200px, lớn nhất là full không gian.
auto-fit → tự động co giãn và tạo layout đẹp trên mọi kích thước màn hình.
📌 Căn chỉnh trong Grid
.container {
justify-items: center; /* theo trục ngang */
align-items: center; /* theo trục dọc */
}
Hoặc căn cả khối Grid:
.container {
justify-content: center;
align-content: center;
}
🧩 Ví dụ thực tế – Layout trang tin tức
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 24px;
}
.header {
grid-column: 1 / 3; /* kéo ngang 2 cột */
}
Grid cho phép bạn “kéo – thả – mở rộng” vùng mà không cần thay đổi HTML nhiều, rất phù hợp cho các layout kiểu báo, blog, landing page…
🎉 Kết luậnCSS Grid là công cụ cực kỳ mạnh và hiện đại, giúp đơn giản hóa những bố cục mà trước đây rất khó để làm bằng float hay Flexbox.
Nếu bạn đang muốn nâng tầm giao diện web của mình, hãy dành thời gian tìm hiểu Grid — đảm bảo bạn sẽ thấy nó mượt, dễ dùng và cực kỳ đáng giá.
🎯 CSS Grid là gì?CSS Grid là hệ thống bố cục 2 chiều (two-dimensional layout), cho phép bạn kiểm soát đồng thời chiều ngang (columns) và chiều dọc (rows).
Khác với Flexbox chỉ mạnh về 1 chiều, Grid đặc biệt phù hợp cho:
Layout trang chủ
Giao diện dashboard
Gallery hình ảnh
Bố cục nhiều cột phức tạp
Form nhiều hàng – nhiều cột
🔧 Cách kích hoạt Grid
.container {
display: grid;
}
Khi đã kích hoạt Grid, bạn có thể xác định số hàng, số cột, kích thước, khoảng cách và cách phần tử tự động lấp đầy không gian.
🧱 Tạo lưới cơ bản1. Tạo 3 cột bằng nhau
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
2. Tạo layout 2 cột không đều
grid-template-columns: 1fr 2fr;
🔥 Auto-fit & Auto-fill – Tự động responsive không cần media queries
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
Giải thích:
minmax(200px, 1fr) → mỗi item nhỏ nhất 200px, lớn nhất là full không gian.
auto-fit → tự động co giãn và tạo layout đẹp trên mọi kích thước màn hình.
📌 Căn chỉnh trong Grid
.container {
justify-items: center; /* theo trục ngang */
align-items: center; /* theo trục dọc */
}
Hoặc căn cả khối Grid:
.container {
justify-content: center;
align-content: center;
}
🧩 Ví dụ thực tế – Layout trang tin tức
.container {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 24px;
}
.header {
grid-column: 1 / 3; /* kéo ngang 2 cột */
}
Grid cho phép bạn “kéo – thả – mở rộng” vùng mà không cần thay đổi HTML nhiều, rất phù hợp cho các layout kiểu báo, blog, landing page…
🎉 Kết luậnCSS Grid là công cụ cực kỳ mạnh và hiện đại, giúp đơn giản hóa những bố cục mà trước đây rất khó để làm bằng float hay Flexbox.
Nếu bạn đang muốn nâng tầm giao diện web của mình, hãy dành thời gian tìm hiểu Grid — đảm bảo bạn sẽ thấy nó mượt, dễ dùng và cực kỳ đáng giá.