Both Grid and Flexbox are modern CSS layout systems, and they overlap enough to be confusing. The simplest way to choose is to ask whether you're arranging things along one line or across rows and columns at the same time.
The core difference
- Flexbox is one-dimensional: it lays items out in a single row or column, and content decides sizing.
- Grid is two-dimensional: you define rows and columns, and place items into the cells.
- Flexbox is content-first (items size themselves); Grid is layout-first (the tracks are defined, then items fill them).
Use Flexbox for
- Navigation bars and toolbars.
- Centering a single element.
- A row of buttons or tags that should wrap naturally.
- Distributing space among a few items along one axis.
Use Grid for
- Full page layouts with header, sidebar, content, and footer.
- Card galleries and dashboards where items align in rows and columns.
- Anything where you want to control both axes or overlap items.
A responsive card grid without media queries
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
This creates as many columns as fit, each at least 240px wide and sharing leftover space equally. The layout reflows from one column on phones to several on desktops without a single media query.
Named areas for page layouts
.page {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
Use both together
Grid for the overall page structure, Flexbox inside components. They are complementary, not competitors: a grid cell can itself be a flex container.
Frequently asked questions
Is CSS Grid better than Flexbox?
Neither is better; they solve different problems. Use Grid for two-dimensional layouts and Flexbox for one-dimensional alignment.
What does auto-fit with minmax do?
It creates as many columns as fit the container, each with a minimum width, and lets them share the remaining space.
Can I use Grid and Flexbox together?
Yes. A common pattern is a grid for page layout and flex containers inside the cells.
Is CSS Grid supported in all browsers?
Yes, it has been supported in all major modern browsers for years.
Try it: CSS Grid Generator — free, runs in your browser, nothing is uploaded.
Originally published at ilovekit.app.
Top comments (1)
Việc phân biệt giữa Grid và Flexbox thường trở nên mơ hồ khi các thuộc tính như align-items hay justify-content xuất hiện ở cả hai. Kinh nghiệm của mình là hãy luôn bắt đầu với Grid nếu bạn đang thiết kế cấu trúc khung xương chính của trang web, đặc biệt là khi cần kiểm soát cả hàng và cột cùng lúc. Flexbox sẽ phát huy sức mạnh tốt nhất khi bạn chỉ cần sắp xếp các phần tử theo một chiều duy nhất, như thanh điều hướng hoặc một nhóm nút bấm. Nếu cố gắng dùng Flexbox để tạo layout phức tạp nhiều lớp, code CSS của bạn sẽ sớm trở nên cực kỳ khó bảo trì với quá nhiều lồng ghép div.