Back in the project,
and now with the theory out of the way,
it's your turn again.
Before we do that though,
let's first fix the width of our unordered list
to this 1,200 pixels that we initially had.
This, so our unordered list is centered once again,
but besides that, well, you can now apply
what you just learned about the CSS grid.
The structure here is basically the same
that we had in the theory project.
So actually, all it takes to create the layout that we need.
Keep in mind,
this is what our grid should look like in the end.
Therefore, make sure to apply all these concepts,
turn our unordered list into a grid container.
And then, we'll see how you can work
on the layout of that grid,
how you can change the distance between our different
elements inside the grid,
and how you can make sure that our furred
Cartier London, well,
it's this plate across the entire width off that grid.
Good luck with that.
You now have the chance to pause the video
and to try this on your own,
and then we'll solve this together.
So how did it go? Were you successful?
Let's try this together now.
And for that, as I said,
we'll first create our grid logic here
by turning our unordered list into this grid container.
So back in the code,
here in our unordered list selector,
I'll add the display property and set it equal to the grid.
With this in place,
well, nothing changes.
You saw this in the theory lecture
because now we have to define
what our grid should look like.
As I said, we focus on to the columns only here
at this point of the project.
Therefore, we need to tell CSS here
that we want to have a grid,
which consists of two different columns.
This can be achieved with
our grid template columns property.
So grid, template, columns.
and here as you learned,
each value we define is a specific column.
This means in our case, we need to add two values.
We can work with pixels, for examples, percentages,
anything like that.
As we want to have two equally distributed columns,
I'll again use the fraction notation here.
Each column, therefore,
will have one fraction, column one,
and one fraction, column two.
With this change in place,
yeah, things look better already,
so we're coming closer.
What's now a problem is
the distance between our different grid items.
If we activate our helper here in the developer tools,
you'll see what I mean.
We have a gap between the columns,
but not between the rows.
Let's add the distance between our rows here.
And we can do this with our gap shortcut.
Gap written like this.
And with the first value,
we define the space between our different roles.
Here, I'll go for a gap of 20 pixels maybe.
And I'll also define the gap between our columns,
although we have a default gap applied, of also 20 pixels.
Let's see what this looks like.
Yeah, looks better now we have this distance.
If we unselect the grid,
this is kind of where we want to go to.
So this was our first problem.
Another problem we have is that
our elements are not using the entire space
we gave them inside our grid.
Well, this is just you to our predefined width
we added here as a temporary solution previously.
If we delete this here,
so width 500 pixels should be gone,
then this looks a lot better,
so this problem was also fixed quickly.
With this, our page really looks good now I would say.
There is only one last issue
and that's the way our third item here is this plate.
This should take the entire space
available in the second row.
You also learned how this works, though.
You can use Nth of type selector
to select the specific element.
And then, with our grid column property,
we can specify how many columns this element should occupy.
So back in our code,
we will now add the selector
maybe down here
directly below our unordered list selector.
So we want to select the list item and here the Nth of type.
So a specific number of a list item
inside our unordered list.
Here, this should be the third item,
so number three.
And now we use the grid column property
to define, well,
how many columns this element should occupy.
As you saw, you have multiple ways to well define that.
I'll go with the pretty common notation
of telling it that it should start
at the beginning of the first column.
So this is this number one here.
Then we add a space and a slash,
and now it should span across two columns.
With this change in place,
we now achieved exactly what you're going to have,
and if unselect our grid helper here,
you'll see, well, that this looks kind of what we saw
on our finished page that I showed you.
One thing I don't like here though,
is the gap between our last item here and the footer.
We can fix this easily here in our unordered list selector,
which holds the entire grid logic.
Here we won't set the margin to zero and auto,
we'll keep it zero at the top,
auto to the right,
then maybe 48 pixels to the bottom,
and again, auto to the left,
well, to keep it centered with this in place.
Yeah, we also edit this requires a space down here.
So with this, we are almost done with our website here.
We also learned how the grid works in its basics.
In the next lecture,
we'll dive into one additional small new topic
because here this explore link is missing an arrow,
so we'll learn how we can implement this.