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

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.3NoNo566155

Comments

  1. User Avatar
    JP DeVries
    Permalink to comment#

    It’s min-content and max-content, not mincontent and maxcontent. Safari doesn’t seem to support min-content or max-content with grid-template-rows.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag