grid-rows / grid-columns

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

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

.grid {

  display: grid;

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

}

This defines the number of rows/columns in the grid as well as their dimension. Note: all those properties should be prefixed with -ms- as well to make it work in IE 10.

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), mincontent, maxcontent, 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 (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. 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.

As of writing, repeat() isn’t supported yet. However you may find a similar syntax looking like this: (pattern)[x]. So 1fr (1% 1fr)[11].

Important! grid-rows and grid-columns are deprecated but currently supported by Internet Explorer 10. The new and official syntax is grid-definition-rows and grid-definition-columns.

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

• grid-row-align / grid-column-align
• grid-row-span / grid-column-span
• grid-row / grid-column

Browser Support

Support coming in WebKit/Blink and Gecko (currently in some nightly builds).