CSS Grid vs Flexbox - When to Use Which?

Answer

CSS Grid and Flexbox are both powerful layout systems, but they excel in different scenarios. Understanding when to use each is key to efficient CSS.

Core Difference

Aspect	Flexbox	CSS Grid
Dimension	1D (row OR column)	2D (rows AND columns)
Content-based	Yes	Can be, but typically set
Gap support	Yes	Yes
Item placement	Sequential	Anywhere in grid
Best for	Components	Page layouts

When to Use Flexbox

/* 1. Navigation bars */
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 2. Centering content */
.centered {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 3. Variable width items */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* 4. Media objects */
.card {
	display: flex;
	gap: 1rem;
}

/* 5. Filling remaining space */
.input-group {
	display: flex;
}
.input-group input {
	flex: 1;
}

When to Use Grid

/* 1. Page layouts */
.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;
}

/* 2. Card grids */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

/* 3. Form layouts */
.form {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 1rem;
}

/* 4. Dashboard widgets */
.dashboard {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 200px);
	gap: 16px;
}

/* 5. Overlapping elements */
.hero {
	display: grid;
	place-items: center;
}
.hero > * {
	grid-area: 1 / 1; /* Stack on same cell */
}

Comparison Examples

Equal-Width Items

/* Flexbox - items can shrink unevenly */
.flex-row {
	display: flex;
}
.flex-row > * {
	flex: 1;
}

/* Grid - truly equal columns */
.grid-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

Responsive Layouts

/* Flexbox - wrap when needed */
.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
.flex-wrap > * {
	flex: 1 1 200px; /* Minimum 200px before wrap */
}

/* Grid - auto-fill with minmax */
.grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Decision Flowchart

Combining Both

/* Grid for page layout */
.page {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 2rem;
}

/* Flexbox for component layout */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Grid for card container */
.card-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

/* Flexbox for card content */
.card {
	display: flex;
	flex-direction: column;
}
.card-body {
	flex: 1;
}
.card-footer {
	margin-top: auto;
}

Quick Reference

Task	Recommendation
Navbar	Flexbox
Card grid	Grid
Sidebar + content	Grid
Button group	Flexbox
Form layout	Grid
Centering	Flexbox (simpler)
Dashboard	Grid
Vertical centering	Flexbox
Photo gallery	Grid
Inline elements	Flexbox

Key Points

• Flexbox: 1D, content-sized, great for components
• Grid: 2D, explicit sizing, great for page layouts
• Use both together - they complement each other
• Grid for overall layout, Flexbox for content within
• When in doubt: start with Flexbox, upgrade to Grid if needed