What's the difference between auto-fill and auto-fit?

With auto-fill, empty column tracks are kept (items don't stretch if there are fewer items than columns fit). With auto-fit, empty tracks are collapsed, causing items to stretch to fill the row. For most card grids, auto-fill is the right choice.

Can grid items overlap?

Yes. You can place multiple grid items in the same grid area using the same line numbers. The later item appears on top by default. Use z-index to control stacking order.

Do I need to specify every cell?

No. Items not explicitly placed flow automatically into the grid's implicit tracks in document order. You only need explicit placement when you want to override the default flow.

What is an implicit grid?

The explicit grid is what you define with grid-template-columns and grid-template-rows. The implicit grid is created automatically when items need to go beyond the defined tracks. Control implicit track sizing with grid-auto-rows and grid-auto-columns.

Is CSS Grid supported in all browsers?

Yes. CSS Grid has had excellent support across all major browsers since 2017. The modern features used in this guide (including gap, minmax, and auto-fill) are fully supported in all evergreen browsers.

CSS Grid Layout Guide: Build Two-Dimensional Page Layouts

← Back to HTML & CSS Fundamentals course

CSS Grid is the most powerful layout system available in CSS. Where Flexbox handles rows or columns one dimension at a time, Grid lets you define both rows and columns simultaneously — giving you precise control over the full two-dimensional layout of a page.

Setting Up a Grid Container

Apply display: grid to the parent element:

css

.layout {
  display: grid;
}

This creates a grid container. Direct children become grid items. Unlike Flexbox, items don't automatically reposition — you need to define the structure first.

Defining Columns: `grid-template-columns`

css

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
}

This creates two columns: a fixed 200px column and one that takes all remaining space.

The `fr` Unit

fr is Grid's most important unit. It represents a fraction of the available space after fixed sizes are accounted for:

css

grid-template-columns: 1fr 2fr 1fr;
/* Three columns: left and right get 25% each, middle gets 50% */

Common Column Patterns

css

/* Three equal columns */
grid-template-columns: repeat(3, 1fr);

/* Sidebar + main content */
grid-template-columns: 250px 1fr;

/* Auto-fill cards (responsive without media queries) */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

Defining Rows: `grid-template-rows`

css

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

auto lets the row size to its content. 1fr expands to fill available space. The pattern auto 1fr auto creates a layout where the header and footer hug their content and the main area fills the rest of the viewport.

Gap Between Items

css

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;       /* same gap between rows and columns */
  column-gap: 2rem;  /* or control separately */
  row-gap: 1rem;
}

Placing Items: Grid Lines

By default, grid items flow automatically left to right, top to bottom. You can place items precisely using grid line numbers:

css

.header {
  grid-column: 1 / 3;  /* spans from line 1 to line 3 = both columns */
  grid-row: 1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main {
  grid-column: 2;
  grid-row: 2;
}

.footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

Line numbers start at 1 on the left/top. grid-column: 1 / -1 spans the full width regardless of how many columns there are.

`span` Keyword

css

.header {
  grid-column: span 2;  /* span 2 columns from wherever it starts */
}

Named Grid Areas: `grid-template-areas`

Grid areas let you name regions of your layout and assign items to them by name:

css

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

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

The grid-template-areas property is a visual map of your layout — each string is a row, each word is a column. Use . for an empty cell. This is one of the most readable layout tools in CSS.

Auto-Fill and Auto-Fit with `minmax()`

The repeat(auto-fill, minmax()) pattern creates a fully responsive grid without any media queries:

css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

auto-fill creates as many columns as fit. minmax(280px, 1fr) means each column is at least 280px and can grow to fill available space. Result: 4 columns on a 1200px screen, 3 on 900px, 2 on 600px, 1 on small mobile — zero media queries.

Practical Example: Full Page Layout

css

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.site-header {
  grid-area: header;
  background: #1a1a2e;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 2rem;
}

.site-nav {
  grid-area: sidebar;
  background: #f5f5f5;
  padding: 2rem 1.5rem;
  border-right: 1px solid #e0e0e0;
}

.site-main {
  grid-area: main;
  padding: 2rem;
}

.site-footer {
  grid-area: footer;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

Grid vs Flexbox: When to Use Each

Situation	Use
Overall page layout (header, sidebar, main, footer)	Grid
A row of navigation links	Flexbox
A card grid with variable card widths	Grid
Centring one item vertically and horizontally	Flexbox
A form with labels and inputs in columns	Grid
A toolbar with a logo and buttons	Flexbox
Two-dimensional positioning	Grid
One-dimensional reordering	Flexbox

They're complementary tools. Most real layouts use both: Grid for the page structure, Flexbox for the components within.

Previous: Lesson 8 — CSS Flexbox | Next: Lesson 10 — Responsive Design

Part of the HTML & CSS Fundamentals course.

External references:

MDN Web Docs — CSS Grid auto-fill vs auto-fit explained

Setting Up a Grid Container

Defining Columns: grid-template-columns

The fr Unit