Units and Utilities 3 exercises

Implement a 3x7 Grid Layout

Our goal was to create a grid with 7 rows and 3 columns using the grid-template shorthand and add gaps between the rows and columns.

The first step is to set the display to grid:

display: grid;

Next, we'll use the grid-template shorthand to set 7 equally sized rows and 3 equally si

Loading solution


0:00 Let's write the solution to this exercise. The first thing -- it's no surprise here -- that we need to do is set display to grid so that we can use our grid properties. As the instructions say, I want you to use the grid-template shorthand to set rows and columns all at once.

0:16 I want seven equally sized rows. I'm definitely going to use repeat here so I don't have to type 1fr seven times. If you don't remember, the rows come first and then a forward slash and then the columns. I want three equally sized columns, also just 1fr. There we are.

0:37 We're almost there. Very close. Now we just need to add the gaps. We can add the column and row gaps separately. Because they're exactly the same, just 10 pixels, I'm just going to set gap to 10 pixels.

0:49 Just as a reminder though, I could just do column-gap 10 pixels and row-gap 10 pixels, if I wanted them to be different. I don't, so I'll stick with gap of 10 pixels. That's it. A bit more practice with fractions and repeat, the grid-template shorthand, and gaps.