CSS Flexbox vs Grid: Cheat Sheet and When to Use Each

CSS layouts used to mean floats, clearfixes, and endless hacks. Today, Flexbox and Grid give developers two powerful, purpose-built layout systems. The challenge is knowing which one to reach for and when.

This guide breaks down the core differences, shows you exactly when each tool is the right choice, and provides a quick-reference cheat sheet you can bookmark.

The core difference in one sentence

Flexbox handles one dimension at a time — either a row or a column. Grid handles two dimensions simultaneously — rows and columns at once.

That single distinction drives almost every decision about which to use.

What is CSS Flexbox?

Flexbox (Flexible Box Layout) is a layout model that arranges items in a single axis: either horizontally (row) or vertically (column). You define a flex container, and its direct children become flex items that can grow, shrink, and align along that axis.

Flexbox is ideal when you have a group of items that need to be distributed or aligned along one direction — navigation links, a row of cards, a button group, or a centered element.

.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Key Flexbox properties:

• flex-direction — row, 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 (start, end, center, stretch, baseline)
• flex-wrap — whether items wrap to a new line
• gap — space between flex items
• flex-grow, flex-shrink, flex-basis — how individual items resize

What is CSS Grid?

CSS Grid is a two-dimensional layout system. You define rows and columns on the container, then place items into cells, areas, or let the browser auto-place them.

Grid is ideal when you need to control both rows and columns at once — full-page layouts, image galleries, dashboards, complex form layouts.

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
}

Key Grid properties:

• grid-template-columns — defines columns (e.g., repeat(3, 1fr), 250px 1fr)
• grid-template-rows — defines rows
• grid-template-areas — names areas for semantic placement
• gap (or row-gap / column-gap) — space between grid cells
• grid-column, grid-row — how many cells an item spans
• place-items — shorthand for align-items + justify-items
• auto-fit / auto-fill — responsive columns without media queries

Flexbox vs Grid: when to use each

Use Flexbox when:

1. You have a single row or column of items Navigation bars, tab lists, button groups, icon rows — anything that is fundamentally a line of items.

2. Content size should drive layout Flexbox lets items grow or shrink based on their content and available space. If you want items to be as wide as they need to be, Flexbox is the natural fit.

3. You need simple alignment Centering an element both horizontally and vertically with display: flex; justify-content: center; align-items: center on the parent is still the most readable centering solution in CSS.

4. You are working inside a component A card's internal layout (image, title, description, button stacked vertically) is a single column — Flexbox handles it cleanly.

Use Grid when:

1. You are building a full-page layout Header, sidebar, main content, and footer — this is a two-dimensional problem. Grid lets you define the structure once and position everything explicitly.

2. You need rows and columns to align across items Unlike Flexbox, Grid tracks rows across the entire grid. If you want a gallery where every image thumbnail aligns in rows and columns (not just in its own row), you need Grid.

3. You want responsive columns without media queries grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates as many 250px+ columns as fit the container and wraps to fewer columns as the viewport narrows. This is impossible to replicate cleanly with Flexbox.

4. You need to place items precisely Grid lets you put an item in a specific row and column, or span it across multiple rows and columns. Named grid areas make complex layouts readable.

Flexbox cheat sheet

Property	Values	Effect
display	flex	Creates a flex container
flex-direction	row | column | row-reverse | column-reverse	Sets main axis direction
justify-content	flex-start | flex-end | center | space-between | space-around | space-evenly	Aligns items on main axis
align-items	stretch | flex-start | flex-end | center | baseline	Aligns items on cross axis
flex-wrap	nowrap | wrap | wrap-reverse	Allows items to wrap
gap	length	Space between items
flex	grow shrink basis	Item sizing shorthand
flex-grow	number	How much item grows
flex-shrink	number	How much item shrinks
flex-basis	length | auto	Item's base size
order	integer	Item order within container
align-self	same as align-items	Overrides align-items for one item

Grid cheat sheet

Property	Example	Effect
display	grid	Creates a grid container
grid-template-columns	repeat(3, 1fr)	Defines 3 equal columns
grid-template-rows	auto 1fr auto	Defines row sizes
grid-template-areas	"header header" "sidebar main"	Named layout areas
gap	1rem 2rem	Row gap, column gap
grid-column	1 / 3	Item spans columns 1–2
grid-row	2 / 4	Item spans rows 2–3
grid-area	header	Places item in named area
place-items	center	Centers items in cells
auto-fit	repeat(auto-fit, minmax(200px, 1fr))	Responsive columns
auto-fill	repeat(auto-fill, minmax(200px, 1fr))	Fills with empty tracks
fr unit	1fr 2fr	Fractional unit of available space

Common layout patterns

Centering a single element

/* Flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.container {
  display: grid;
  place-items: center;
}

Both work. Grid's place-items: center is shorter. Flexbox is more familiar to most developers.

Responsive card grid

/* Grid — no media queries needed */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

This creates as many columns as fit, each at least 280px wide. As the viewport shrinks, columns automatically wrap to fewer per row.

Page layout with sidebar

.page {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    'header  header'
    'sidebar main'
    'footer  footer';
  min-height: 100vh;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Flexbox navigation bar

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 60px;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

The myth that you must choose one

You do not have to pick Flexbox or Grid for your entire project. The most common real-world pattern is to use them together:

• Grid for the macro layout: page structure, section divisions, dashboard panels
• Flexbox for the micro layout: components inside those sections — navbars, card interiors, button groups, form rows

A sidebar navigation built with Grid at the page level might use Flexbox inside each menu item to align an icon and label side-by-side. This is the intended use. They solve different problems and work together naturally.

Generate CSS layouts visually

Instead of memorizing every property, use the FixTools CSS Flexbox & Grid Builder to visually create layouts and copy the generated code directly. Adjust properties with a visual editor, see the layout update in real time, and copy clean CSS when you are done.

For production, run your CSS through the FixTools CSS Formatter to organize it, or through the CSS Minifier to reduce file size before deployment.