What is CSS Flexbox?
Flexbox — short for Flexible Box Layout — is a one-dimensional CSS layout model. It arranges items in a single direction at a time: either in a row (horizontal) or a column (vertical). You set the direction using flex-direction.
Flexbox is designed for distributing space among items in a container and controlling their alignment. It is ideal when you have a group of items that need to be lined up, spaced out, or centered.
/* Basic Flexbox container */
.container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis alignment */
align-items: center; /* cross axis alignment */
gap: 1rem;
}Remember: Flexbox thinks in one dimension. Either left-right (row) OR top-bottom (column) — not both at once.
What is CSS Grid?
CSS Grid is a two-dimensional layout system. It controls both rows and columns at the same time. This makes it the right tool for complex page layouts where you need precise control over where things appear both horizontally and vertically.
Grid lets you define a template — the structure of rows and columns — and then place items anywhere within that template.
/* Basic Grid container */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: auto;
gap: 1.5rem;
}
/* Spanning items across cells */
.featured-card {
grid-column: 1 / 3; /* span 2 columns */
}Key idea: Grid thinks in two dimensions — rows AND columns. You define the whole layout structure first, then place items into it.
Flexbox vs Grid: Key Differences
| Feature | Flexbox | CSS Grid |
|---|---|---|
| Dimensions | One-dimensional (row or column) | Two-dimensional (rows and columns) |
| Layout direction | One axis at a time | Both axes simultaneously |
| Item placement | Automatic, flows in order | Precise, place anywhere in grid |
| Content-first vs layout-first | Content drives layout | Layout drives content placement |
| Gap control | gap property | gap, column-gap, row-gap |
| Best for | Navigation, buttons, card rows | Page layouts, dashboards, galleries |
| Browser support | Excellent (all modern browsers) | Excellent (all modern browsers) |
When to Use Flexbox
Use Flexbox when you have items that need to be aligned along a single axis — either in a row or a column. Here are the most common scenarios:
- Navigation bars — logo on the left, links on the right
- Centering content — horizontally, vertically, or both
- Button groups — a row of buttons with equal spacing
- Card rows — a horizontal list of cards that wrap to the next line
- Form labels and inputs — side-by-side alignment
- Toolbar or action bar — icons or controls in a line
- Equal-height columns — sidebar + main content layout
/* Navbar: logo left, links right */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
/* Center any element */
.card {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}When to Use CSS Grid
Use Grid when your layout requires two-dimensional control — when the position of items in both rows and columns matters at the same time. Common use cases:
- Full page layouts — header, sidebar, main, footer
- Image galleries — masonry or uniform grid of images
- Dashboard layouts — cards of different sizes in a grid
- Magazine/blog grids — featured article spans multiple columns
- Form layouts — fields aligned across multiple rows and columns
- Pricing tables — plans side by side with shared row headers
- Any layout where items span multiple rows or columns
/* Classic page layout */
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Can You Use Both Together?
Absolutely — and you should. Flexbox and Grid are not competitors. In a real project you will use both, sometimes on the same page at the same time.
A common pattern is to use Grid for the overall page structure and Flexbox for components inside each section. For example:
- Grid creates the header / sidebar / main / footer layout
- Flexbox arranges the nav links inside the header
- Flexbox aligns the icon and text inside each sidebar item
- Grid arranges the article cards inside main
- Flexbox aligns the date, title, and excerpt inside each card
Think of Grid as the architect (defines the building structure) and Flexbox as the interior designer (arranges things within each room).
Quick Decision Guide
Not sure which to use? Ask yourself one question:
- Do I need to control layout in one direction only (a row of buttons, a vertical list)? → Use Flexbox
- Do I need to control layout in both rows and columns (a page grid, a card gallery)? → Use Grid
- Do I need a responsive layout that switches between columns on mobile? → Grid with auto-fill/auto-fit
- Do I need items to wrap and flow naturally? → Flexbox with flex-wrap
There is no wrong answer as long as your layout works. With experience you will reach for the right tool instinctively.