CSS Grid Basics 3 exercises

Specifying Row Heights

The first step is to turn the container into a grid container, by setting the display property to grid. This is essential, as our second property won't work otherwise:

.container {
/* other styles above */
display: grid;

Next, we will use the grid-template-rows property,

Loading solution


0:01 Our job here is to make four rows of these provided dimensions in this container. First, we need to turn it into a grid container. Display must be set to grid otherwise our second property won't do a thing, and that second property is grid-template-rows.

0:16 Grid-template-rows, much like grid-template-columns, expects a space-separated list of row values. We want a 150-pixel row, and then a 50-pixel row, and then a 400-pixel row, and then a 150-pixel row. That's it. We have our four rows of those exact dimensions.