CSS Grid and Flexbox Complete Guide
Master CSS Grid and Flexbox for building modern, responsive layouts. Learn when to use each and how to combine them effectively.
FrontendIntermediate22 min read
AI Summary
Quick context for CSS Grid and Flexbox Complete Guide
CSS Grid and Flexbox Complete Guide is a intermediate guide in Frontend. Master CSS Grid and Flexbox for building modern, responsive layouts. Learn when to use each and how to combine them effectively.. Key topics: css, flexbox, grid, layout.
## Flexbox: One-Dimensional Layout
Flexbox handles layout in a single direction — either a row or a column. It excels at distributing space and aligning items within a container.
### The Basics
```css
.container {
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
}
```
Key properties on the flex container:
- `flex-direction` — row (default), column, row-reverse, column-reverse
- `justify-content` — alignment along the main axis (start, end, center, space-between, space-around, space-evenly)
- `align-items` — alignment along the cross axis (stretch, start, end, center, baseline)
- `flex-wrap` — whether items wrap to new lines (nowrap, wrap)
### Flex Item Properties
```css
.item {
flex-grow: 1; /* Take available space */
flex-shrink: 0; /* Do not shrink below basis */
flex-basis: 200px; /* Starting size */
}
/* Shorthand */
.item {
flex: 1 0 200px; /* grow shrink basis */
}
```
### Common Flexbox Patterns
**Centering anything:**
```css
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
```
**Navigation bar:**
```css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
```
**Card footer aligned to bottom:**
```css
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* Pushes footer to bottom */
}
```
## CSS Grid: Two-Dimensional Layout
CSS Grid handles rows and columns simultaneously. It is the tool for page-level layouts and complex component layouts.
### Defining a Grid
```css
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 1.5rem;
}
```
### The `fr` Unit
The `fr` unit distributes available space proportionally.
```css
/* Two-column layout: sidebar takes 1/4, main takes 3/4 */
.layout {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
}
```
### Named Grid Areas
```css
.page {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
```
### Responsive Grids Without Media Queries
```css
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
```
This creates as many columns as fit, each at least 280px wide, without breakpoints.
## Combining Grid and Flexbox
Use Grid for the page layout and Flexbox for component-level alignment. They are complementary, not competing.
```css
/* Page layout with Grid */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr;
min-height: 100vh;
}
/* Component layout with Flexbox */
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1.5rem;
}
```
## Gap Property
Both Grid and Flexbox support the `gap` property, which replaces margins between items without affecting outer spacing.
```css
.container {
display: flex;
gap: 1rem; /* Uniform gap */
column-gap: 2rem; /* Horizontal only */
row-gap: 0.5rem; /* Vertical only */
}
```
## Alignment Cheat Sheet
### Justify (Main Axis)
| Value | Effect |
|---|---|
| `start` | Items packed at start |
| `end` | Items packed at end |
| `center` | Items centered |
| `space-between` | Equal space between items |
| `space-around` | Equal space around items |
| `space-evenly` | Equal space between and around |
### Align (Cross Axis)
| Value | Effect |
|---|---|
| `start` | Items aligned to top |
| `end` | Items aligned to bottom |
| `center` | Items centered vertically |
| `stretch` | Items stretch to fill (default) |
## Browser Support
Both Flexbox and Grid are supported in all modern browsers. Use autoprefixer if you need to support older browsers, though this is rarely necessary in 2026.
## Practice Exercise
Build a responsive card layout with Grid, center content with Flexbox, and use named areas for a dashboard page. Start with the auto-fill grid pattern and add a sidebar with named grid areas once comfortable.
Continue with related content
Suggested next reads and tools from the knowledge graph.