We’ve learned how to define the number of columns in our grid explicitly. To specify the number and size of the rows, we are going to use the property grid-template-rows
.
This property is almost identical to grid-template-columns
. Take a look at the code below to see both properties in action.
.grid { display: grid; width: 1000px; height: 500px; grid-template-columns: 100px 200px; grid-template-rows: 10% 20% 600px; }
This grid has two columns and three rows. grid-template-rows
defines the number of rows and sets each row’s height. In this example, the first row is 50 pixels tall (10% of 500), the second row is 100 pixels tall (20% of 500), and the third row is 600 pixels tall.
When using percentages in these two properties, remember that rows are defined as a percentage of the grid’s height, and columns are defined as a percentage of its width.
Instructions
By default, the rows are sized to fit evenly inside the grid.
Let’s manually change the size of our rows. Use grid-template-rows
to set the first row to be 40%
of the table’s height. The second row should be 50%
of the total height. The third row should be 50px
.