The grid-auto-rows
CSS property specifies the size of an implicitly-created grid row track.
If a grid item is positioned into a row that is not explicitly sized by grid-template-rows
, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.
/* Keyword values */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* <flex> values */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple track-size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* Global values */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset;
<length>
<percentage>
<percentage>
value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like auto
.<flex>
fr
specifying the track’s flex factor. Each <flex>
-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a minmax()
notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)
).
max-content
min-content
minmax(min, max)
<flex>
value sets the track’s flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).auto
min-width
/min-height
) of the grid items occupying the grid track.Note: auto
track sizes (and only auto
track sizes) can be streched by the align-content
and justify-content
properties.
<track-size>+where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere
<length-percentage> = <length> | <percentage>
<div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
#grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; }
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-auto-rows' in that specification. | Candidate Recommendation | Initial definition |
Initial value | auto |
---|---|
Applies to | grid containers |
Inherited | no |
Percentages | refer to corresponding dimension of the content area |
Media | visual |
Computed value | the percentage as specified or the absolute length |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 57
|
16
|
52
|
10
|
44
|
10.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 57 | 57
|
16
|
52
|
44 | 10.3 | 6.0 |
grid-auto-columns
, grid-auto-flow
, grid
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows