CSS Grid

Q: 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.

Updated September 30, 20262 min read

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 gridcss

/* 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; }

Readers ask

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.

Often compared

CSS Grid vs FlexboxCSS Grid places items in rows and columns at once, in two dimensions, while Flexbox lines them up along one row or column, ideal inside components.