Defining grids with fixed rows
grid-template-rows
Use this property to define a grid system that has a fixed number of rows.
Definitions
Refer to these definitions to better understand how the property values are used.
Grid lines
Each reference to a grid line refers to the imaginary line on either side of grid cells.
For a layouts with N rows, there are N+1 horizontal grid lines — one at the top, one between each row, and one at the bottom.
For a layouts with M columns, there are M+1 vertical grid lines — one at the left edge, one between each column, and one at the right edge.
Grid lines are numbered starting at 1. For rows, the topmost line is 1 and the bottommost line is N+1. For columns, the leftmost line is 1 and the rightmost line is M+1. *
* Arabic, Hebrew and other left-to-right writing systems, reverse everything.Grid line aliases
For clarity and ease of use, each grid line can be aliased with an arbitrary name. That alias can be used with grid-row-start, grid-row-end, grid-column-start and grid-column-end property values.
Grid line aliases are defined when specifying grid-template-rows, grid-template-columns, and grid-template-areas.
In addition, when a grid line alias is declared by the user within a grid-template-areas definition, the browser implicitly defines two other names that can be used in those start/end properties. For example, if a grid-template-areas defines an area named foo:
| generated name | property | interpretation |
|---|---|---|
| 'foo-start' | grid-row-start | The topmost line of the area |
| 'foo-start' | grid-column-start | The leftmost line of the area |
| 'foo-end' | grid-row-end | The bottommost line of the area |
| 'foo-end' | grid-column-end | The rightmost line of the area |
Property values
The grid-template-rows property declares the height of each row in a grid system using any of these units:
- percentages
- fractional units
- fitting functions
- font-relative typographic units
- fixed size units
More about units for specifying row heights . . .
Use 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 any of these font-relative typographic units to set each grid template row height:
| 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 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 |
Specify one value for each row in the container. For example, a container with 3 rows might look like:
display: grid;
grid-template-rows: 15% 75% 10%
display: grid;
grid-template-rows: 1.5fr 7.5fr 1fr
Grid line aliases
Grid line aliases may be defined between the row heights, by specifying an arbitrary name enclosed in square brackets. These aliases may then be used in other CSS declarations that specify starting and ending lines for rows. Each grid line may be aliased with more than one name.
For example, this declaration defines convenient aliases for use in a classic header, body, footer grid container.
display: grid;
grid-template-rows: [header-top] 15% [header-bottom body-top] 75% [body-bottom footer-top] 10% [footer-bottom]
Shorthand for similar sized rows
When several rows have the same height, it may be convenient to specify them using the repeat() function, as in this example:
display: grid;
grid-template-rows: 4rem repeat(3, 1fr);