Skip to main content

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design.

Almanac

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 Read article “grid-template-columns / grid-template-rows”

Almanac

grid-row / grid-column

The grid-row and grid-column properties define which row or column an element will be displayed on.

.element {
  grid-row | grid-column: <integer> [DEFAULT: auto];
}

Important! grid-row is supposed to be a shorthand for grid-row-position and grid-row-span. The current implementation in Internet Explorer 10 for grid-row should be the one for grid-row-position (which isn't supported). Same goes for grid-column.

Related Browser Support… Read article “grid-row / grid-column”
icon-link icon-logo-star icon-search icon-star