`grid-template-rows` defines the number and sizes of a grid’s rows. A row is a track—the space between two horizontal grid lines. Give the property a space-separated list of sizes, with one value for each row you want to define explicitly. section 2.3 section 2.7
Start with a parent element set to `display: grid`; its children become grid items. For a card containing a heading, paragraph, and link, three rows can keep the links aligned across cards even when the paragraphs differ in length. section 2.7 section 5.4.2
Give the card’s middle row the remaining space
```css .card-content { display: grid; height: calc(100% - 4rem); grid-template-rows: min-content auto min-content; align-items: center; } ``` The first and last rows take only the room needed for the heading and link. The `auto` row takes the remaining space for the paragraph. Here, `calc(100% - 4rem)` accounts for the inner container’s top and bottom padding and margins. Remove an unwanted bottom margin from the heading: its margin counts toward the space the first row needs and can make the spacing look uneven. section 5.4.2
Listing 5.14 Inner container layout adjustments
main > section > div {
background-color: rgba(0, 0, 0, .75);
margin: 1rem;
padding: 1rem;
color: whitesmoke;
text-align: center;
height: calc(100% - 4rem);
display: grid;
grid-template-rows: min-content auto min-content;
align-items: center;
}
section h2 {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0;
}
See the complete inner-container rule, including the three row sizes, calculated height, vertical alignment, and heading margin adjustment. section 5.4.2
You can shorten a track list with `repeat()` when rows share a size; its first argument is the number of rows and its second is their size. Defining rows this way creates an explicit grid. If more items need cells than the explicit grid provides, the browser can create implicit rows instead. section 2.3.1 section 2.3.4
