1
00:00:02,150 --> 00:00:03,460
Back in the project,

2
00:00:03,460 --> 00:00:05,490
and now with the theory out of the way,

3
00:00:05,490 --> 00:00:07,250
it's your turn again.

4
00:00:07,250 --> 00:00:08,840
Before we do that though,

5
00:00:08,840 --> 00:00:12,230
let's first fix the width of our unordered list

6
00:00:12,230 --> 00:00:17,200
to this 1,200 pixels that we initially had.

7
00:00:17,200 --> 00:00:21,800
This, so our unordered list is centered once again,

8
00:00:21,800 --> 00:00:24,760
but besides that, well, you can now apply

9
00:00:24,760 --> 00:00:27,653
what you just learned about the CSS grid.

10
00:00:28,510 --> 00:00:30,850
The structure here is basically the same

11
00:00:30,850 --> 00:00:32,750
that we had in the theory project.

12
00:00:32,750 --> 00:00:37,750
So actually, all it takes to create the layout that we need.

13
00:00:38,430 --> 00:00:39,300
Keep in mind,

14
00:00:39,300 --> 00:00:43,400
this is what our grid should look like in the end.

15
00:00:43,400 --> 00:00:47,050
Therefore, make sure to apply all these concepts,

16
00:00:47,050 --> 00:00:51,600
turn our unordered list into a grid container.

17
00:00:51,600 --> 00:00:54,210
And then, we'll see how you can work

18
00:00:54,210 --> 00:00:57,570
on the layout of that grid,

19
00:00:57,570 --> 00:01:00,200
how you can change the distance between our different

20
00:01:00,200 --> 00:01:01,840
elements inside the grid,

21
00:01:01,840 --> 00:01:04,970
and how you can make sure that our furred

22
00:01:06,060 --> 00:01:07,660
Cartier London, well,

23
00:01:07,660 --> 00:01:11,970
it's this plate across the entire width off that grid.

24
00:01:11,970 --> 00:01:13,700
Good luck with that.

25
00:01:13,700 --> 00:01:15,920
You now have the chance to pause the video

26
00:01:15,920 --> 00:01:17,370
and to try this on your own,

27
00:01:17,370 --> 00:01:19,563
and then we'll solve this together.

28
00:01:22,230 --> 00:01:25,840
So how did it go? Were you successful?

29
00:01:25,840 --> 00:01:27,770
Let's try this together now.

30
00:01:27,770 --> 00:01:29,400
And for that, as I said,

31
00:01:29,400 --> 00:01:33,240
we'll first create our grid logic here

32
00:01:33,240 --> 00:01:37,830
by turning our unordered list into this grid container.

33
00:01:37,830 --> 00:01:40,190
So back in the code,

34
00:01:40,190 --> 00:01:43,003
here in our unordered list selector,

35
00:01:44,320 --> 00:01:49,320
I'll add the display property and set it equal to the grid.

36
00:01:49,840 --> 00:01:51,183
With this in place,

37
00:01:53,480 --> 00:01:54,910
well, nothing changes.

38
00:01:54,910 --> 00:01:56,880
You saw this in the theory lecture

39
00:01:56,880 --> 00:01:59,000
because now we have to define

40
00:01:59,000 --> 00:02:01,113
what our grid should look like.

41
00:02:02,080 --> 00:02:05,390
As I said, we focus on to the columns only here

42
00:02:05,390 --> 00:02:07,130
at this point of the project.

43
00:02:07,130 --> 00:02:10,100
Therefore, we need to tell CSS here

44
00:02:10,100 --> 00:02:11,470
that we want to have a grid,

45
00:02:11,470 --> 00:02:14,373
which consists of two different columns.

46
00:02:15,780 --> 00:02:17,330
This can be achieved with

47
00:02:17,330 --> 00:02:20,790
our grid template columns property.

48
00:02:20,790 --> 00:02:24,180
So grid, template, columns.

49
00:02:24,180 --> 00:02:26,020
and here as you learned,

50
00:02:26,020 --> 00:02:29,320
each value we define is a specific column.

51
00:02:29,320 --> 00:02:33,093
This means in our case, we need to add two values.

52
00:02:34,330 --> 00:02:37,530
We can work with pixels, for examples, percentages,

53
00:02:37,530 --> 00:02:38,920
anything like that.

54
00:02:38,920 --> 00:02:43,120
As we want to have two equally distributed columns,

55
00:02:43,120 --> 00:02:45,803
I'll again use the fraction notation here.

56
00:02:46,860 --> 00:02:48,060
Each column, therefore,

57
00:02:48,060 --> 00:02:51,010
will have one fraction, column one,

58
00:02:51,010 --> 00:02:53,083
and one fraction, column two.

59
00:02:54,880 --> 00:02:57,140
With this change in place,

60
00:02:57,140 --> 00:02:59,250
yeah, things look better already,

61
00:02:59,250 --> 00:03:00,523
so we're coming closer.

62
00:03:01,510 --> 00:03:03,330
What's now a problem is

63
00:03:03,330 --> 00:03:07,440
the distance between our different grid items.

64
00:03:07,440 --> 00:03:10,603
If we activate our helper here in the developer tools,

65
00:03:11,510 --> 00:03:13,540
you'll see what I mean.

66
00:03:13,540 --> 00:03:16,240
We have a gap between the columns,

67
00:03:16,240 --> 00:03:18,440
but not between the rows.

68
00:03:18,440 --> 00:03:22,750
Let's add the distance between our rows here.

69
00:03:22,750 --> 00:03:26,900
And we can do this with our gap shortcut.

70
00:03:26,900 --> 00:03:29,730
Gap written like this.

71
00:03:29,730 --> 00:03:31,060
And with the first value,

72
00:03:31,060 --> 00:03:35,010
we define the space between our different roles.

73
00:03:35,010 --> 00:03:39,040
Here, I'll go for a gap of 20 pixels maybe.

74
00:03:39,040 --> 00:03:42,470
And I'll also define the gap between our columns,

75
00:03:42,470 --> 00:03:47,060
although we have a default gap applied, of also 20 pixels.

76
00:03:47,060 --> 00:03:49,140
Let's see what this looks like.

77
00:03:49,140 --> 00:03:52,810
Yeah, looks better now we have this distance.

78
00:03:52,810 --> 00:03:54,050
If we unselect the grid,

79
00:03:54,050 --> 00:03:56,033
this is kind of where we want to go to.

80
00:03:57,300 --> 00:04:00,000
So this was our first problem.

81
00:04:00,000 --> 00:04:01,680
Another problem we have is that

82
00:04:01,680 --> 00:04:05,490
our elements are not using the entire space

83
00:04:05,490 --> 00:04:08,310
we gave them inside our grid.

84
00:04:08,310 --> 00:04:11,740
Well, this is just you to our predefined width

85
00:04:11,740 --> 00:04:15,480
we added here as a temporary solution previously.

86
00:04:15,480 --> 00:04:16,839
If we delete this here,

87
00:04:16,839 --> 00:04:19,543
so width 500 pixels should be gone,

88
00:04:20,610 --> 00:04:22,440
then this looks a lot better,

89
00:04:22,440 --> 00:04:25,423
so this problem was also fixed quickly.

90
00:04:26,960 --> 00:04:30,527
With this, our page really looks good now I would say.

91
00:04:32,550 --> 00:04:34,840
There is only one last issue

92
00:04:34,840 --> 00:04:39,330
and that's the way our third item here is this plate.

93
00:04:39,330 --> 00:04:41,450
This should take the entire space

94
00:04:41,450 --> 00:04:43,463
available in the second row.

95
00:04:44,720 --> 00:04:47,110
You also learned how this works, though.

96
00:04:47,110 --> 00:04:49,710
You can use Nth of type selector

97
00:04:49,710 --> 00:04:51,960
to select the specific element.

98
00:04:51,960 --> 00:04:54,640
And then, with our grid column property,

99
00:04:54,640 --> 00:04:59,173
we can specify how many columns this element should occupy.

100
00:05:00,090 --> 00:05:02,340
So back in our code,

101
00:05:02,340 --> 00:05:04,310
we will now add the selector

102
00:05:06,370 --> 00:05:08,730
maybe down here

103
00:05:08,730 --> 00:05:11,880
directly below our unordered list selector.

104
00:05:11,880 --> 00:05:16,880
So we want to select the list item and here the Nth of type.

105
00:05:17,560 --> 00:05:20,070
So a specific number of a list item

106
00:05:20,070 --> 00:05:22,080
inside our unordered list.

107
00:05:22,080 --> 00:05:24,030
Here, this should be the third item,

108
00:05:24,030 --> 00:05:26,220
so number three.

109
00:05:26,220 --> 00:05:29,460
And now we use the grid column property

110
00:05:30,770 --> 00:05:31,870
to define, well,

111
00:05:31,870 --> 00:05:35,820
how many columns this element should occupy.

112
00:05:35,820 --> 00:05:40,170
As you saw, you have multiple ways to well define that.

113
00:05:40,170 --> 00:05:43,500
I'll go with the pretty common notation

114
00:05:43,500 --> 00:05:45,160
of telling it that it should start

115
00:05:45,160 --> 00:05:47,660
at the beginning of the first column.

116
00:05:47,660 --> 00:05:49,983
So this is this number one here.

117
00:05:52,110 --> 00:05:55,340
Then we add a space and a slash,

118
00:05:55,340 --> 00:06:00,123
and now it should span across two columns.

119
00:06:01,000 --> 00:06:02,980
With this change in place,

120
00:06:02,980 --> 00:06:06,030
we now achieved exactly what you're going to have,

121
00:06:06,030 --> 00:06:08,530
and if unselect our grid helper here,

122
00:06:08,530 --> 00:06:12,600
you'll see, well, that this looks kind of what we saw

123
00:06:12,600 --> 00:06:15,463
on our finished page that I showed you.

124
00:06:16,620 --> 00:06:19,020
One thing I don't like here though,

125
00:06:19,020 --> 00:06:23,660
is the gap between our last item here and the footer.

126
00:06:23,660 --> 00:06:28,660
We can fix this easily here in our unordered list selector,

127
00:06:29,030 --> 00:06:31,050
which holds the entire grid logic.

128
00:06:31,050 --> 00:06:33,860
Here we won't set the margin to zero and auto,

129
00:06:33,860 --> 00:06:36,070
we'll keep it zero at the top,

130
00:06:36,070 --> 00:06:37,383
auto to the right,

131
00:06:38,220 --> 00:06:42,120
then maybe 48 pixels to the bottom,

132
00:06:42,120 --> 00:06:44,310
and again, auto to the left,

133
00:06:44,310 --> 00:06:48,060
well, to keep it centered with this in place.

134
00:06:48,060 --> 00:06:51,443
Yeah, we also edit this requires a space down here.

135
00:06:53,020 --> 00:06:57,000
So with this, we are almost done with our website here.

136
00:06:57,000 --> 00:07:00,880
We also learned how the grid works in its basics.

137
00:07:00,880 --> 00:07:02,010
In the next lecture,

138
00:07:02,010 --> 00:07:05,570
we'll dive into one additional small new topic

139
00:07:05,570 --> 00:07:08,900
because here this explore link is missing an arrow,

140
00:07:08,900 --> 00:07:11,243
so we'll learn how we can implement this.