CSS Grid Layout - Complete Guide with Examples

Q: What is the difference between CSS grid and flexbox?

CSS Grid is two-dimensional — it handles rows and columns at the same time. Flexbox is one-dimensional — it handles either a row OR a column. Use grid for page-level layouts and card grids. Use flexbox for component-level layouts like navbars and button groups.

Q: How do I make a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as fit, each at least 250px wide, and they grow equally to fill remaining space. The grid automatically reflows as the viewport changes — no breakpoints needed.

Q: What does fr mean in CSS grid?

fr stands for 'fraction of available space'. 1fr 2fr means the second column gets twice as much space as the first. It is similar to flex-grow but for grid tracks. fr units only divide the space remaining after fixed-size tracks (like px or auto) are accounted for.

How CSS Grid Works

Grid lets you define a two-dimensional layout with rows and columns. Set display: grid on a container, define your track sizes, and child elements slot into cells automatically. Unlike flexbox, grid controls both dimensions at once.

Think of it as defining a spreadsheet structure: you declare how many columns and rows you want, how big they are, and then place items into that structure. Items can span multiple cells, and tracks can be fixed, flexible, or content-sized.

Basic Grid

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 3 equal columns */
  gap: 16px;
}
      

1

2

3

4

5

6

The fr Unit

fr means “fraction of remaining space.” After fixed-size tracks take their space, fr divides what is left.

.grid {
  display: grid;
  grid-template-columns: 250px 1fr;     /* fixed sidebar + fluid main */
  gap: 16px;
}
      

Sidebar

Main Content

/* Unequal fractions */
grid-template-columns: 1fr 2fr;        /* second column is twice as wide */
      

1fr

2fr

Responsive Grid with auto-fit

This is the most useful grid pattern. No media queries needed — columns reflow automatically:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
      

Card 1

Card 2

Card 3

Card 4

Card 5

Each column is at least 200px. As the container shrinks, columns drop to the next row. As it grows, more columns appear. Resize your browser to see it.

Grid Template Areas

Name regions of your layout and assign items to them. Great for page-level structure:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-height: 250px;
}

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

Header

Sidebar

Main

Footer

Spanning Columns and Rows

.item-wide {
  grid-column: span 2;    /* span 2 columns */
}
.item-tall {
  grid-row: span 2;       /* span 2 rows */
}
/* Or use explicit lines: */
.item {
  grid-column: 1 / 3;     /* from line 1 to line 3 */
  grid-row: 1 / 2;
}
      

Spans 2 cols

1

2

3

4

Alignment in Grid

Grid uses the same alignment properties as flexbox, plus a few extras:

justify-items / align-items — align all items within their cells
justify-content / align-content — align the grid tracks within the container
justify-self / align-self — align a single item within its cell
place-items — shorthand for align-items justify-items

.grid {
  display: grid;
  place-items: center;   /* center items in their cells */
}
      

Frequently Asked Questions

What is the difference between CSS grid and flexbox?

Grid is two-dimensional (rows + columns). Flexbox is one-dimensional (row or column). Use grid for page layouts and card grids. Use flexbox for navbars, button groups, and centering. They work together well.

How do I make a responsive grid without media queries?

Use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Columns auto-reflow as the viewport changes. Each column is at least 250px, and they grow to fill remaining space.

What does fr mean in CSS grid?

fr stands for “fraction of available space.” 1fr 2fr means the second track gets twice the space of the first. It only divides space remaining after fixed tracks (px, auto) are calculated.

Related Tools

Grid Generator Flexbox Generator CSS Flexbox Reference Media Queries Guide