Home / CSS Almanac / Properties / G / grid-template-columns / grid-template-rows

grid-template-columns / grid-template-rows

The grid-template-rows and grid-template-columns properties are the primary CSS properties for establishing a grid layout, once the element is a grid context (display: grid;).

There are also -ms-grid-columns and -ms-grid-rows, which are the old IE version of this. You may want to consider Autoprefixing to get them, or not, your call. There was also a weird period where they were grid-definition-columns and grid-definition-rows, but that's not a thing anymore.

Here's an example derived from Microsoft's documentation:

.grid {

  display: grid;

  grid-template-columns: auto 100px 1fr 2fr;
  grid-template-rows: 50px 5em min-content auto;

}

This defines the number of rows/columns in the grid as well as their dimension.

These two properties support a list of values separated by spaces. Each value will define a new column/row by setting a dimension. A list of 4 values will result in 4 columns/rows. A single value will produce a single column/row.

Accepted values include length (like px or em), percentages, fractions (fr; see below), auto (or fit-content), min-content, max-content, and minmax(), or the repeat() function.

In the code example above, that means:

  • Column 1 (auto keyword): Column is fitted to the content in the column.
  • Column 2 ("100px"): Column is 100 pixels wide.
  • Column 3 ("1fr"): Column takes up one fraction unit of the remaining space.
  • Column 4 ("2fr"): Column takes up two fraction units of the remaining space.
  • Row 1 ("50px"): Row is 50 pixels tall.
  • Row 2 ("5em"): Row is 5 ems tall.
  • Row 3 (min-content keyword): Row is as small as the content will let it be.
  • Row 4 (auto keyword): Row is fitted to the content in the row.

repeat()

The repeat() function has been specifically designed for this module. It allows you to define a pattern repeated X times. Like repeat(6, 1fr);. Let's say you want to do 12 equal-width columns spaced from each other by a 1% margin; you could define 1fr repeat(11, 1% 1fr). It is the same as 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

The fr Unit

The fr unit can be used for grid-rows and grid-columns values. It stands for "fraction of available space". Think of it as percentages for available space when you've taken off fixed-sized and content-based columns/rows. As the spec says:

The distribution of fractional space occurs after all 'length' or content-based row and column sizes have reached their maximum.

Related

Our best resource for all things CSS grid is our Complete Guide to CSS Grid.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
57445211*1610.1

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
10.346No677063