This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

grid-auto-rows

Summary

Changes default size of grid rows. Creates implicit grid tracks when a grid item is placed into a row that is not explicitly sized (by grid-template-rows ) or when the auto-placement algorithm has generated additional rows. This property (with grid-auto-columns) specifies the size of such implicitly-created tracks.

Overview table

Initial value
auto
Applies to
Grid containers
Inherited
No
Media
visual
Computed value
As specified
Animatable
No

CSS Object Model Property
:

Percentages
As specified

Syntax

  • grid-auto-rows: <track-size>

Values

<track-size>
A space-separated track list specifying the line names and track sizing functions of the grid.

Examples

/*
In this example, grid item B is positioned in column 5,
which creates four implicit columns (1-4) and one implicit row (2).
The implicit (auto) columns and rows are sized at 20px
using grid-auto-columns and grid-column-rows.
*/
<style type="text/css">
  #grid {
display: grid;
grid-auto-columns: 20px;
grid-auto-rows: 20px }
  #A { grid-column: 1;          grid-row: 1; }
  #B { grid-column: 5;          grid-row: 1 / span 2; }
  #C { grid-column: 1 / span 2; grid-row: 2; }
</style>

Related specifications

W3C Grid Layout Module
W3C Working Draft

See also

Related articles

CSS Layout

Grid Layout