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);
grid-auto-rows
0

style > grid > grid-auto-rowsDefining grids with flexible rows

🔗 🔎