# CSS Grid

URL: https://softwaredictionary.org/terms/css-grid
Category: Web Development
Last updated: 2026-09-30

In short: CSS Grid is a two-dimensional CSS layout system that arranges elements into rows and columns at the same time, making complex page layouts simple to build.

## What is CSS Grid?

CSS Grid, formally the CSS Grid Layout module, lets you divide a container into rows and columns and place its children into the resulting cells. You switch it on with `display: grid` on a parent element, and every direct child becomes a grid item. It is supported in all modern browsers and is the standard tool for page-level layouts with headers, sidebars, main content, and footers.

You define the tracks with `grid-template-columns` and `grid-template-rows`, and `gap` sets the space between them. The `fr` unit shares out leftover space, so `1fr 2fr` makes the second column twice as wide as the first, and `repeat(auto-fill, minmax(200px, 1fr))` creates as many columns as fit, giving a responsive card grid without a single media query. Items can span several tracks with `grid-column: span 2` or be placed into named regions drawn with `grid-template-areas`, and subgrid lets nested elements line up with the parent's tracks.

CSS Grid is like a sheet of graph paper: you draw the rows and columns first, then decide which cells each piece of content occupies. Because the structure lives in the parent's CSS, you can rearrange a whole page for small screens by changing a few lines inside a media query, without touching the HTML.

The classic confusion is CSS Grid versus Flexbox. Flexbox is one-dimensional: it lays items out along a single row or column and lets the content's size drive the layout. Grid is two-dimensional and layout-first: you define the structure and place content into it. Most sites use both, Grid for the overall page and Flexbox for aligning items inside a component such as a navigation bar.

## Key takeaways

- `display: grid` turns an element into a grid container, and its direct children become grid items.
- Grid controls rows and columns at the same time, so it is two-dimensional.
- The `fr` unit, `repeat()`, and `minmax()` build flexible, responsive tracks.
- `grid-template-areas` lets you name regions of the layout and place items by name.
- Use Grid for overall page structure and Flexbox for one-dimensional alignment.

## Example: A page layout and a responsive card grid

```css
/* A page layout with named areas */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  gap: 1rem;
}
.page > header { grid-area: header; }
.page > aside  { grid-area: sidebar; }
.page > main   { grid-area: main; }

/* Cards: as many columns of at least 200px as fit */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
```

## Frequently asked questions

**What is the difference between CSS Grid and Flexbox?**

CSS Grid is two-dimensional and controls rows and columns together, which suits whole-page layouts. Flexbox is one-dimensional and arranges items along a single row or column, which suits components such as toolbars and menus.

**What does 1fr mean in CSS Grid?**

`fr` stands for a fraction of the free space in the grid container. With `grid-template-columns: 1fr 1fr 1fr`, the available width is split into three equal columns, and `2fr` would take twice the share of `1fr`.

**Is CSS Grid supported in all browsers?**

Yes. All modern browsers have supported CSS Grid since 2017, and subgrid, which lets nested grids align with their parent, has been available in all major browsers since late 2023.

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt