1
00:00:01,110 --> 00:00:03,930
‫Next up, let's use CSS grid

2
00:00:03,930 --> 00:00:06,690
‫in order to build or over a layout.

3
00:00:06,690 --> 00:00:08,640
‫And we will then also improve

4
00:00:08,640 --> 00:00:12,603
‫that layout using some additional Tailwind classes.

5
00:00:14,340 --> 00:00:18,450
‫So basically what we want to do is to set up a grid

6
00:00:18,450 --> 00:00:21,810
‫which contains three rows for the layout.

7
00:00:21,810 --> 00:00:25,110
‫So one row here for the header, one for this content,

8
00:00:25,110 --> 00:00:28,110
‫and one for this card overview.

9
00:00:28,110 --> 00:00:29,520
‫The goal of that is

10
00:00:29,520 --> 00:00:33,930
‫that we can then easily push this overview here all the way

11
00:00:33,930 --> 00:00:35,703
‫to the bottom of the screen.

12
00:00:37,230 --> 00:00:40,380
‫So, let's come here to our app layout.

13
00:00:40,380 --> 00:00:44,730
‫And so here, let's now remove this class name of layout

14
00:00:44,730 --> 00:00:47,850
‫which no longer exists in our CSS.

15
00:00:47,850 --> 00:00:51,540
‫And then let's make this the grid container.

16
00:00:51,540 --> 00:00:55,740
‫So similar to Flexbox, in order to make a grid container

17
00:00:55,740 --> 00:00:59,130
‫we just use the grid class.

18
00:00:59,130 --> 00:01:00,510
‫Now if we give this a safe

19
00:01:00,510 --> 00:01:02,880
‫nothing really special will happen.

20
00:01:02,880 --> 00:01:07,170
‫And so let's also define some rows and some columns here.

21
00:01:07,170 --> 00:01:09,900
‫So first, just for experimenting

22
00:01:09,900 --> 00:01:12,570
‫and then once we know how grid works,

23
00:01:12,570 --> 00:01:15,903
‫we will really build our final layout with it.

24
00:01:16,800 --> 00:01:21,033
‫Now, first of all, we should also give this here a height.

25
00:01:21,930 --> 00:01:24,690
‫So let's say height,

26
00:01:24,690 --> 00:01:26,640
‫which is just this h.

27
00:01:26,640 --> 00:01:30,210
‫And then here as always, we can define some value.

28
00:01:30,210 --> 00:01:31,980
‫So let's say like 40,

29
00:01:31,980 --> 00:01:34,800
‫which would look like this.

30
00:01:34,800 --> 00:01:36,570
‫Well, we can't really see that.

31
00:01:36,570 --> 00:01:38,730
‫So let's give it a background color.

32
00:01:38,730 --> 00:01:41,880
‫So BG, red, for example,

33
00:01:41,880 --> 00:01:44,970
‫this one here and beautiful.

34
00:01:44,970 --> 00:01:47,790
‫So let's make this here a lot bigger.

35
00:01:47,790 --> 00:01:51,510
‫And I don't know how big this actually can get.

36
00:01:51,510 --> 00:01:55,533
‫So for some reason sometimes we lose the auto complete here.

37
00:01:56,430 --> 00:01:58,113
‫Maybe 128 works.

38
00:01:59,100 --> 00:02:00,660
‫Well, let's see.

39
00:02:00,660 --> 00:02:03,573
‫So that's why we have the documentation.

40
00:02:05,160 --> 00:02:05,993
‫So height.

41
00:02:07,890 --> 00:02:09,963
‫So let's see all the classes.

42
00:02:11,430 --> 00:02:14,553
‫So the tallest one is apparently 96.

43
00:02:16,020 --> 00:02:18,150
‫So, just for the fun of it

44
00:02:18,150 --> 00:02:21,690
‫let's actually define our own value like we did earlier

45
00:02:21,690 --> 00:02:24,363
‫and let's set it to 600 pixels.

46
00:02:25,200 --> 00:02:28,770
‫And so now we start seeing at least something,

47
00:02:28,770 --> 00:02:32,160
‫maybe 400 or 500

48
00:02:32,160 --> 00:02:33,213
‫and yeah.

49
00:02:35,520 --> 00:02:36,690
‫So we start seeing now

50
00:02:36,690 --> 00:02:39,210
‫that this is actually already a grid,

51
00:02:39,210 --> 00:02:43,890
‫because by default it is stretching these three rows here

52
00:02:43,890 --> 00:02:47,250
‫automatically to the size of the content.

53
00:02:47,250 --> 00:02:51,750
‫And so let's now explicitly define some grid rows here.

54
00:02:51,750 --> 00:02:55,530
‫And we do that simply with the grid row

55
00:02:55,530 --> 00:02:59,970
‫and then the number of rows that we want, class name.

56
00:02:59,970 --> 00:03:02,340
‫And so you see that nothing really changed

57
00:03:02,340 --> 00:03:06,483
‫because they still have the size of their content itself.

58
00:03:08,880 --> 00:03:10,410
‫So just for the fun of it,

59
00:03:10,410 --> 00:03:13,440
‫let's say grit row

60
00:03:13,440 --> 00:03:16,230
‫or grit call 2.

61
00:03:16,230 --> 00:03:19,590
‫And with this we would create two columns,

62
00:03:19,590 --> 00:03:23,220
‫which also for some reason are not appearing.

63
00:03:23,220 --> 00:03:26,733
‫So maybe that's calls, yeah, just like this.

64
00:03:28,440 --> 00:03:30,543
‫Now we could also define a gap.

65
00:03:31,740 --> 00:03:34,920
‫And so here again, any value would work.

66
00:03:34,920 --> 00:03:37,863
‫And so then we get this gap here between,

67
00:03:38,760 --> 00:03:42,180
‫which we cannot really see because of that background,

68
00:03:42,180 --> 00:03:45,150
‫but it's really also not important.

69
00:03:45,150 --> 00:03:47,940
‫So we could also have it just horizontally

70
00:03:47,940 --> 00:03:51,420
‫or just vertically by writing gaps

71
00:03:51,420 --> 00:03:54,150
‫or gap x 4.

72
00:03:54,150 --> 00:03:56,820
‫And so then it's only here between these two

73
00:03:56,820 --> 00:03:59,790
‫or we could use gap y,

74
00:03:59,790 --> 00:04:01,053
‫and then it's only here.

75
00:04:02,790 --> 00:04:03,623
‫Okay.

76
00:04:03,623 --> 00:04:06,750
‫But this is really just for experimentation.

77
00:04:06,750 --> 00:04:09,030
‫So let's get rid of this,

78
00:04:09,030 --> 00:04:13,017
‫but we do actually want to create our own rows.

79
00:04:13,017 --> 00:04:14,580
‫Now the problem with this

80
00:04:14,580 --> 00:04:18,813
‫is that it will create three rows of the exact same size.

81
00:04:19,650 --> 00:04:22,053
‫Well, here it should be actually grid rows.

82
00:04:23,550 --> 00:04:25,470
‫So the nice trick of seeing

83
00:04:25,470 --> 00:04:29,220
‫if the class name works or not is to hover it.

84
00:04:29,220 --> 00:04:31,380
‫And if we then get some coat here

85
00:04:31,380 --> 00:04:34,440
‫that means that the class actually exists.

86
00:04:34,440 --> 00:04:35,580
‫And so now indeed

87
00:04:35,580 --> 00:04:38,610
‫the three rows here have the exact same size,

88
00:04:38,610 --> 00:04:41,130
‫which is really not what we want.

89
00:04:41,130 --> 00:04:43,590
‫Instead, what we want is

90
00:04:43,590 --> 00:04:46,410
‫or can be visible actually right here,

91
00:04:46,410 --> 00:04:49,050
‫which is to have two rows like this.

92
00:04:49,050 --> 00:04:52,620
‫So the first one should be just the size of the content,

93
00:04:52,620 --> 00:04:54,900
‫the last one as well.

94
00:04:54,900 --> 00:04:56,340
‫And then the one in the middle

95
00:04:56,340 --> 00:05:00,180
‫should fill all the other remaining space.

96
00:05:00,180 --> 00:05:02,853
‫And so, let's go ahead and do that.

97
00:05:03,840 --> 00:05:07,860
‫So the way we can do this is to again use square brackets

98
00:05:07,860 --> 00:05:11,580
‫to define our own custom column right here.

99
00:05:11,580 --> 00:05:15,870
‫So again, kind of as an escape patch from Tailwind.

100
00:05:15,870 --> 00:05:17,970
‫And so here we can say auto,

101
00:05:17,970 --> 00:05:19,860
‫then we need this underscore,

102
00:05:19,860 --> 00:05:23,370
‫then one fr and then auto again.

103
00:05:23,370 --> 00:05:25,710
‫And so once again, I'm assuming

104
00:05:25,710 --> 00:05:29,160
‫that you know exactly how CSS grid works.

105
00:05:29,160 --> 00:05:30,420
‫And so this, for example

106
00:05:30,420 --> 00:05:33,840
‫one fr unit should make sense to you.

107
00:05:33,840 --> 00:05:35,940
‫So if we give this a safe now

108
00:05:35,940 --> 00:05:39,063
‫then we get exactly what we were looking for.

109
00:05:40,650 --> 00:05:44,550
‫Now to finish, let's just get rid of this one here.

110
00:05:44,550 --> 00:05:47,250
‫And instead of specifying a special value,

111
00:05:47,250 --> 00:05:49,623
‫we can use h-screen.

112
00:05:50,610 --> 00:05:54,300
‫And so this will then give it basically the entire height

113
00:05:54,300 --> 00:05:55,410
‫of the view port,

114
00:05:55,410 --> 00:05:57,630
‫which is equivalent to setting the height

115
00:05:57,630 --> 00:06:00,960
‫to 100 viewport height units.

116
00:06:00,960 --> 00:06:05,910
‫So this is one of the special values that we have here.

117
00:06:05,910 --> 00:06:08,640
‫So h-screen, h-min, max.

118
00:06:08,640 --> 00:06:12,270
‫We also have h-full for height 100%.

119
00:06:12,270 --> 00:06:15,870
‫But here we are really looking for this one.

120
00:06:15,870 --> 00:06:17,490
‫If you wanted some percentages

121
00:06:17,490 --> 00:06:20,250
‫you could then use this one here.

122
00:06:20,250 --> 00:06:24,753
‫For example, for width 50%, you would use this one.

123
00:06:25,590 --> 00:06:26,670
‫And yeah.

124
00:06:26,670 --> 00:06:28,320
‫As always, you can just check out

125
00:06:28,320 --> 00:06:31,170
‫this documentation if you need it.

126
00:06:31,170 --> 00:06:35,043
‫So now we can finally get rid of this.

127
00:06:36,780 --> 00:06:39,903
‫But here I forgot the square bracket.

128
00:06:43,020 --> 00:06:45,150
‫Well, this is not correct

129
00:06:45,150 --> 00:06:49,233
‫because I placed the h-screen here inside.

130
00:06:52,410 --> 00:06:54,663
‫Yeah, now that's great.

131
00:06:56,490 --> 00:07:00,990
‫But watch what happens if the page was really small.

132
00:07:00,990 --> 00:07:03,180
‫So then here we would have to scroll,

133
00:07:03,180 --> 00:07:05,640
‫which is really not what we want.

134
00:07:05,640 --> 00:07:06,870
‫So what we need to do

135
00:07:06,870 --> 00:07:10,920
‫is to set the scroll behavior to scroll here

136
00:07:10,920 --> 00:07:12,303
‫on this main element.

137
00:07:13,140 --> 00:07:16,290
‫So again, that's pretty standard CSS,

138
00:07:16,290 --> 00:07:19,830
‫but with Tailwind all we have to do is to define

139
00:07:19,830 --> 00:07:24,227
‫or to use the classier of overflow scroll.

140
00:07:25,740 --> 00:07:29,850
‫So what this does is exactly what we have here.

141
00:07:29,850 --> 00:07:33,090
‫So it sets the overflow property to scroll,

142
00:07:33,090 --> 00:07:35,880
‫making it so that if there is not enough space

143
00:07:35,880 --> 00:07:37,380
‫to display the content,

144
00:07:37,380 --> 00:07:39,633
‫it will then force us to scroll.

145
00:07:42,660 --> 00:07:43,493
‫All right.

146
00:07:45,060 --> 00:07:48,480
‫Now next up, let's go here to the new order page.

147
00:07:48,480 --> 00:07:50,820
‫So, order new.

148
00:07:50,820 --> 00:07:54,120
‫And then here we see that we have all this content here

149
00:07:54,120 --> 00:07:57,690
‫in this left side of the page.

150
00:07:57,690 --> 00:08:01,890
‫So usually what we do most of the time when we design a page

151
00:08:01,890 --> 00:08:05,820
‫or an app is to center somehow the content.

152
00:08:05,820 --> 00:08:08,760
‫So center it in the middle of the view port.

153
00:08:08,760 --> 00:08:11,823
‫And so let's also learn how to do that.

154
00:08:12,750 --> 00:08:13,620
‫So for that,

155
00:08:13,620 --> 00:08:17,730
‫we first of all need to give the container a certain width.

156
00:08:17,730 --> 00:08:21,060
‫And so let's do that with width.

157
00:08:21,060 --> 00:08:22,980
‫And then something here.

158
00:08:22,980 --> 00:08:25,430
‫And then again, I will give it a background color

159
00:08:27,480 --> 00:08:29,580
‫like this.

160
00:08:29,580 --> 00:08:33,150
‫And so we see that this 20 is really not enough,

161
00:08:33,150 --> 00:08:35,490
‫but actually we don't even want a width,

162
00:08:35,490 --> 00:08:37,830
‫but we want a max width.

163
00:08:37,830 --> 00:08:41,310
‫So in these situations where we want a fluid design

164
00:08:41,310 --> 00:08:44,400
‫we should always use max width.

165
00:08:44,400 --> 00:08:48,393
‫And so here actually they look a bit different.

166
00:08:50,280 --> 00:08:52,530
‫So here we have max W

167
00:08:52,530 --> 00:08:55,020
‫and then instead of the normal values,

168
00:08:55,020 --> 00:08:58,950
‫we again get small, extra small, medium, large,

169
00:08:58,950 --> 00:09:01,293
‫and then all these other ones.

170
00:09:02,250 --> 00:09:07,230
‫Alright, so let's now use max width

171
00:09:07,230 --> 00:09:09,543
‫and then let's say 3XL.

172
00:09:12,510 --> 00:09:13,860
‫All right.

173
00:09:13,860 --> 00:09:16,743
‫So let's maybe see this in this view.

174
00:09:17,640 --> 00:09:19,800
‫So at just 50%.

175
00:09:19,800 --> 00:09:21,420
‫And so notice how then at some point

176
00:09:21,420 --> 00:09:25,290
‫we get all this white space there at the right side

177
00:09:25,290 --> 00:09:27,270
‫where you actually want this

178
00:09:27,270 --> 00:09:31,950
‫so this red part here to now be centered in this view port.

179
00:09:31,950 --> 00:09:35,760
‫So distributing this white space basically equally

180
00:09:35,760 --> 00:09:37,893
‫between the left and the right side.

181
00:09:38,760 --> 00:09:41,190
‫So, the way we do that with CSS

182
00:09:41,190 --> 00:09:44,733
‫is to add margin left and margin right auto.

183
00:09:45,930 --> 00:09:50,220
‫So again, hopefully you already know about that trick.

184
00:09:50,220 --> 00:09:53,640
‫And so let's now use that here with Tailwind.

185
00:09:53,640 --> 00:09:58,230
‫So all we have to do is margin on the X site,

186
00:09:58,230 --> 00:10:01,623
‫so left and right and then set it to auto.

187
00:10:02,460 --> 00:10:05,910
‫And with this, more content is nicely centered

188
00:10:05,910 --> 00:10:08,313
‫and it clearly doesn't have this width

189
00:10:08,313 --> 00:10:10,320
‫that we defined right here.

190
00:10:10,320 --> 00:10:14,490
‫But the reason for that is that this is now a grid item.

191
00:10:14,490 --> 00:10:18,180
‫So this is just how it works with CSS grid.

192
00:10:18,180 --> 00:10:20,040
‫So one way around this

193
00:10:20,040 --> 00:10:23,440
‫is that we can wrap this into another div

194
00:10:25,080 --> 00:10:26,490
‫like this,

195
00:10:26,490 --> 00:10:28,800
‫and then we got that fixed.

196
00:10:28,800 --> 00:10:30,660
‫The only thing that we need to do

197
00:10:30,660 --> 00:10:35,660
‫is to then make this element actually with overflow scroll.

198
00:10:38,970 --> 00:10:40,620
‫So let's grab that.

199
00:10:40,620 --> 00:10:41,883
‫And there we go.

200
00:10:43,650 --> 00:10:45,000
‫So now the scroll bar

201
00:10:45,000 --> 00:10:47,940
‫is nicely appearing here on the right side,

202
00:10:47,940 --> 00:10:50,613
‫and everything works nicely.

203
00:10:52,050 --> 00:10:52,980
‫All right.

204
00:10:52,980 --> 00:10:57,000
‫So let's remove this from here.

205
00:10:57,000 --> 00:10:58,473
‫And beautiful.

206
00:10:59,310 --> 00:11:03,060
‫Now we could also add the margin

207
00:11:03,060 --> 00:11:04,890
‫that we have in the homepage,

208
00:11:04,890 --> 00:11:07,890
‫so here at the top and at the bottom.

209
00:11:07,890 --> 00:11:11,190
‫So, let's do that here maybe.

210
00:11:11,190 --> 00:11:16,190
‫So we could do margin y and set it to 10 again.

211
00:11:16,740 --> 00:11:20,250
‫And so that would then create some nice spacing.

212
00:11:20,250 --> 00:11:22,740
‫But actually I want different spacing here

213
00:11:22,740 --> 00:11:26,160
‫at the top of the page for different pages.

214
00:11:26,160 --> 00:11:30,000
‫And therefore, let's define this margin here individually

215
00:11:30,000 --> 00:11:34,200
‫for each page and not here on this wrapper,

216
00:11:34,200 --> 00:11:36,570
‫so here in this layout.

217
00:11:36,570 --> 00:11:40,530
‫So basically all the styles that we defining right here

218
00:11:40,530 --> 00:11:42,390
‫will apply to all the pages

219
00:11:42,390 --> 00:11:45,660
‫because the pages are rendered here in this outlet

220
00:11:45,660 --> 00:11:49,230
‫and therefore here inside these elements.

221
00:11:49,230 --> 00:11:50,063
‫But of course,

222
00:11:50,063 --> 00:11:53,340
‫we can also set individual styles on the page level

223
00:11:53,340 --> 00:11:55,440
‫simply by adding some styles,

224
00:11:55,440 --> 00:11:59,673
‫well, to the components that make up these different pages.

225
00:12:01,410 --> 00:12:04,080
‫So let's revert it back to what we had.

226
00:12:04,080 --> 00:12:08,310
‫And with this, we finished the lecture on CSS grid.

227
00:12:08,310 --> 00:12:09,240
‫And as always

228
00:12:09,240 --> 00:12:11,910
‫make sure to check out the documentation here

229
00:12:11,910 --> 00:12:14,310
‫to learn everything that you need to know.

230
00:12:14,310 --> 00:12:17,313
‫But for now, let's move on to our next topic.