CSS Grid Explained + How to Generate One Free

What Is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you position elements on a web page using rows and columns. Instead of floating elements or using flexbox (which is one-dimensional), Grid gives you complete control over both dimensions at once.

Think of a grid like a spreadsheet. You define how many rows and columns you want, how wide/tall they should be, and then place elements at specific intersections. This makes complex layouts simple and responsive.

Grid vs. Flexbox

Feature	CSS Grid	Flexbox
Dimensions	2D (rows and columns)	1D (rows or columns)
Best for	Page layouts, complex grids	Navigation, flexible items
Control	Parent and child	Mostly parent
Browser support	All modern browsers	All modern browsers
Learning curve	Moderate	Easy to moderate

Basic Grid Concepts

Grid Container

The parent element that holds grid items. You apply grid display:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

Grid Items

The direct children of the grid container. They automatically place themselves in grid cells.

Grid Lines

The vertical and horizontal lines that divide the grid. Used to position items.

Grid Tracks

The spaces between grid lines (rows or columns).

Grid Cells

Single units in the grid, like a cell in a spreadsheet.

Grid Gap

Space between grid items. Use gap: 16px to add consistent spacing.

How to Create a Basic Grid

Define Grid Dimensions

Tell the grid how many columns and rows you want:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px auto 100px;
}

This creates 3 equal-width columns and 3 rows (header 100px, main auto, footer 100px).

Add Content

Add HTML children to the container:

  Header
  Nav
  Main
  Sidebar
  Footer

Position Items (Optional)

Items automatically fill the grid. Use grid-column and grid-row to customize:

main {
  grid-column: 2 / 4;
  grid-row: 2;
}

Common Grid Patterns

Classic Layout (Header, Nav, Main, Sidebar, Footer)

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  height: 100vh;
}

header { grid-column: 1 / -1; }
nav { grid-row: 2; }
main { grid-column: 2; grid-row: 2; }
sidebar { grid-column: 3; grid-row: 2; }
footer { grid-column: 1 / -1; }

Card Grid (Responsive Cards)

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

This creates a responsive grid where cards are at least 250px wide and stretch to fill space. The number of columns adjusts based on screen width.

Dashboard Grid

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: 16px;
}

Perfect for dashboards with multiple widgets that can span different column/row counts.

Responsive Grid

Make grids adapt to different screen sizes using media queries:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Grid Units and Values

Unit	Meaning	Example
px	Fixed pixel size	grid-template-columns: 200px
fr (fraction)	Flexible space (proportional)	grid-template-columns: 1fr 2fr (1:2 ratio)
%	Percentage of container	grid-template-columns: 50%
auto	Size based on content	grid-template-rows: auto
minmax()	Minimum and maximum size	grid-template-columns: minmax(200px, 1fr)

Advanced Grid Features

Grid Template Areas (Naming)

Use named areas instead of line numbers:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "footer footer footer";
}

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

Auto Placement

Items automatically fill empty grid cells. Control with grid-auto-flow:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
}

dense allows smaller items to fill gaps left by larger items.

CSS Grid Generator

Building grids manually requires memorizing syntax. A CSS Grid Generator lets you:

Visually design your grid
See changes instantly
Copy the generated CSS
No syntax memorization needed

Set columns, rows, gaps, and cell sizes visually, then copy the CSS and paste into your project.

Browser Support

CSS Grid is supported in all modern browsers (Chrome, Firefox, Safari, Edge). IE 11 has limited support but is now deprecated. You can use CSS Grid confidently in new projects.

Common Mistakes

Applying grid to wrong element: Use display: grid on the container, not items.
Forgetting gap: Without gap, items touch. Add gap for breathing room.
Using fixed sizes everywhere: Use fr units for flexible layouts, not just px.
Overcomplicating responsive: Use auto-fit/auto-fill for simple responsiveness.

Summary

CSS Grid is a powerful layout system that handles 2D positioning effortlessly. Learn the basics (container, columns, rows, gap), use a generator to build complex layouts visually, and you'll create responsive, professional designs quickly.

Try CSS Grid Generator — Free

No account, no upload to server. Runs entirely in your browser.

Open CSS Grid Generator