CSS Grid Explained

CSS Grid is a layout system for arranging content in two dimensions at once — rows and columns. Where Flexbox handles a single line of items, Grid lets you design a whole page or component layout: a header across the top, a sidebar and main area in the middle, a footer below. You define a grid on a container, and its children snap into the cells.

Turning on the grid

You create a grid by setting display: grid and describing the columns (and optionally rows):

/* A three-column grid where every column is equal width.
   1fr means "one fraction of the available space." */
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;   /* spacing between every cell, rows and columns */
}

<div class="layout">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

The three children automatically fall into the three columns.

The fr unit and repeat()

The fr (fraction) unit is Grid's superpower. Instead of calculating pixel widths, you say how the leftover space should be divided:

/* The sidebar takes one share, the main area takes three shares.
   So main is three times as wide as the sidebar. */
.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

When you have many equal columns, repeat() saves typing:

.gallery {
  display: grid;
  /* Four equal columns — same as writing 1fr 1fr 1fr 1fr */
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

Responsive grids without media queries

A combination of repeat, auto-fit, and minmax creates a grid that reflows on its own as the screen changes size:

.responsive-grid {
  display: grid;
  /* Fit as many columns as possible, each at least 200px wide,
     growing to fill the row. Columns wrap automatically. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

This single line gives you a card layout that shows four columns on a wide screen and gracefully drops to two, then one, on smaller screens — no media queries needed. It pairs naturally with the ideas in Responsive Web Design Basics.

Defining rows too

You can describe rows the same way, giving you full two-dimensional control:

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr;   /* fixed sidebar + flexible main */
  grid-template-rows: auto 1fr auto;  /* header, content, footer */
  min-height: 100vh;
  gap: 12px;
}

Grid vs Flexbox: choosing the right tool

• Use Flexbox for one dimension — a row of buttons, a nav bar, a single column of stacked items. See CSS Flexbox Explained.
• Use Grid for two dimensions — page layouts, card galleries, dashboards, anything with both rows and columns.

They are not rivals. A common pattern is a Grid page layout with Flexbox arranging the items inside each grid area.

Common mistakes

• Reaching for Grid when Flexbox is simpler. A single row of items is a Flexbox job. Grid shines when you have both axes.
• Forgetting display: grid on the container. Grid properties do nothing until the container is actually a grid.
• Using fixed pixel columns everywhere. Fixed widths break on small screens. Prefer fr units and minmax so the layout adapts.
• Adding margins for spacing. Use gap — it spaces cells cleanly without edge-margin headaches.

FAQ

Is CSS Grid widely supported? Yes. Grid is supported in all current browsers and is reliable for any new project.

Should I learn Flexbox or Grid first? Learn Flexbox first — it is simpler and covers many everyday needs. Then add Grid for full-page and two-dimensional layouts.

Keep learning

• Hub: Web Fundamentals
• Related: CSS Flexbox Explained
• Next: Responsive Web Design Basics
• Foundation: CSS Basics for Beginners

Want to build for the web? Explore our courses in Jalgaon.