Units and Utilities 3 exercises

Use Fractional Units and repeat to Define a Layout

As usual, the first step is to set the display property to grid so that our other properties will take effect:

display: grid;

Now that we have a grid container, let's define the rows using grid-template-rows.

We need four equally sized rows, and we'll use the repeat function to a

Loading solution


0:00 Here's the solution. Once again, we need to turn on display to grid so that our other properties will do anything. Now we have a grid container. Let's start with rows, so grid-template-rows. I'm supposed to have four equally sized rows. I'm supposed to use repeat. I'll repeat four times one fraction. Repeat one fraction four times.

0:23 Then we have our columns, which is going to be very similar. I'm repeating one fraction five times as the instructions say. There is our beautiful layout -- five columns, four rows, done using repeats. It just saves a lot of time not having to do this. Not to mention that it makes it very easy if I change my mind and I actually want seven columns.

0:49 I don't have to go count and type "1fr" two more times. I simply change the number. That's repeat. That's the exercise.