Defining grids with flexible rows
grid-auto-rows
Use this property to define a grid system that has a flexible number of rows.
Property values
This property defines a row height for every element that is a direct descendant of a grid container when its height has not already been explicitly defined.
Specify this value using a percentage or a factional unit:
| % | percentage | A percent of the grid container's height |
| fr | fractional | A fractonal portion of the grid container's remaining available height (where the sum of all the fractional declarations equals the whole) |
Or use a fitting function:
| min-content | The height of the element is the minimum amount necessary for any element in the grid row to have all its content fit without overflowing. |
| max-content | The height of the element is the maximum amount necessary for any element in the grid row to have all its content fit without overflowing. |
| minmax(H1, H2) | The height is not less than H1 and not more than H2 |
| fit-content(H) | The height expands to whatever is needed to fit the contents of the element, but never more than H |
| auto | Use whatever space is available after all other row constraints have been met |
Or use one of these font-relative units:
| em | em | The font-size of the current font |
| rem | relative em | The font-size of the <html> element |
| lh | line height | The line-height of the current font |
| rlh | relative line height | The line-height of the <html> element |
| cap | cap height | The nominal height of the current font's capital letters |
| ex | "x" | The height of the current font's "x" glyph |
Or use these viewport-percentage units which account for different display device capabilities:
| vh | viewport height | 1% of the viewport's height |
| vw | viewport width | 1% of the viewport's width |
| vi | viewport inline axis | 1% of the viewport's inline axis |
| vb | viewport block axis | 1% of the viewport's block axis |
| vmin | viewport minimum | Either vh or vw, whichever is smaller |
| vmax | viewport maximum | Either vh or vw, whichever is larger |
Or use any of these fixed size units which are independent of the current font:
| in | inch | A size equal 96px |
| px | pixels | A size equal to 1/96 inch |
| pt | point | A size equal 1in/72 = 1.33px |
| pc | pica | A size equal 1in/6 = 12pt = 16px |
| cm | centimeter | A size equal to 96px/2.54 = 37.8px |
| mm | millimeter | A size equal to 96px/25.4 = 3.8px |
| Q | quarter millimeter | A size equal to 96px/1016 = 0.94px |
Examples
/* new rows will each be at least 10% of the grid container's height,
but never more than 50% of the viewport's height */
grid-auto-rows: minmax(10%, 50vh);