WEBVTT

0
00:00.200 --> 00:05.960
As I mentioned, before getting into coding our form, I just want to talk about the grid layout. And

1
00:05.960 --> 00:06.140
all

2
00:06.140 --> 00:10.430
I mean by grid layout, is using CSS to design the layouts of your page.

3
00:10.460 --> 00:16.490
Taking a step back, every app, website or application layout you make, or have seen, is essentially

4
00:16.490 --> 00:18.890
just boxes placed within boundaries.

5
00:18.890 --> 00:20.070
So then what is a grid?

6
00:20.090 --> 00:27.230
Well, in very simple terms, a grid is just lines - horizontal and vertical lines that define the placement

7
00:27.230 --> 00:29.060
of other design elements.

8
00:29.060 --> 00:35.180
But in order to grasp the grid, you need to know about a few key concepts that I'm going to be discussing

9
00:35.180 --> 00:35.870
with you now.

10
00:35.870 --> 00:40.440
And they are the grid container, the grid cell and the grid area.

11
00:40.460 --> 00:41.120
So what are they?

12
00:41.150 --> 00:42.770
Well, firstly, the grid container.

13
00:42.800 --> 00:47.810
The grid container is just the parent that contains all of the items inside of the grid.

14
00:47.960 --> 00:52.550
In other words, the grid container defines the initial placement of the grid lines, both vertical

15
00:52.550 --> 00:53.600
and horizontal.

16
00:53.660 --> 00:54.320
All right.

17
00:54.350 --> 00:55.190
Makes sense.

18
00:55.190 --> 00:56.210
That's the grid container.

19
00:56.210 --> 00:57.390
Then we've got a grid cell.

20
00:57.410 --> 01:03.580
Very simplistically, it's the smallest space in a grid layout, and it's bounded by 4 grid lines.

21
01:03.600 --> 01:04.170
Very simple.

22
01:04.170 --> 01:06.510
And then we've got finally the grid area.

23
01:06.540 --> 01:10.140
The grid area is an area covering the grid.

24
01:10.980 --> 01:12.100
I know it sounds weird.

25
01:12.140 --> 01:14.790
Basically, it's just how much your element is covering the grid.

26
01:14.820 --> 01:18.540
It could be as small as the area contained within a grid cell.

27
01:18.540 --> 01:22.350
Or it can be as large as all the cells within the entire grid.

28
01:22.380 --> 01:23.070
So there we go.

29
01:23.070 --> 01:25.380
That's the container, the cell and the area.

30
01:25.500 --> 01:27.230
Let me show you with a quick picture.

31
01:27.270 --> 01:27.800
Right.

32
01:27.810 --> 01:31.660
You can define your entire web page with a block of squares.

33
01:31.680 --> 01:35.640
Here we've done them each equal size for width and height, but you don't have to.

34
01:35.670 --> 01:38.610
The entire area is the grid container, right.

35
01:38.640 --> 01:42.630
One of those areas is called a grid cell.

36
01:42.630 --> 01:46.170
And then the grid area could be a grid cell, but it can also be more.

37
01:46.170 --> 01:50.570
For example, we could have a grid area taking up two cells.

38
01:50.580 --> 01:52.470
So this is how the grid layout works.

39
01:52.470 --> 01:58.050
But let me jump over to the text editor and let me just show you very quickly on a simple div element

40
01:58.080 --> 02:00.600
how we can define a grid layout.

41
02:00.750 --> 02:04.950
Now that you understand the basic terminologies, let's get cracking.

42
02:04.980 --> 02:06.670
Let's understand how this works.

43
02:06.690 --> 02:08.880
How do you define a grid?

44
02:08.910 --> 02:14.190
Well, remember we've used flexbox in this course, and just like flexbox, everything begins with a

45
02:14.190 --> 02:14.940
one liner.

46
02:14.940 --> 02:15.830
Here,

47
02:15.840 --> 02:19.650
we need to set the display property to grid.

48
02:19.680 --> 02:20.790
But let me show you what I mean.

49
02:20.790 --> 02:23.520
So, let's create a very simple HTML file.

50
02:23.520 --> 02:24.510
Within here

51
02:24.510 --> 02:28.590
we can have a head and a style section, but let's leave that for now.

52
02:28.620 --> 02:29.550
Let's create a body.

53
02:29.550 --> 02:34.830
And in our body I want to create a div and within the div let's create an h2 heading called "Hello".

54
02:34.860 --> 02:36.860
If we save this, refresh the browser,

55
02:36.870 --> 02:37.560
there we go.

56
02:37.560 --> 02:40.590
We've got "Hello" on the screen - and this is what you would expect.

57
02:40.590 --> 02:42.450
So how do we define a grid?

58
02:42.480 --> 02:44.190
Well, we can access our div.

59
02:44.220 --> 02:47.040
Let's say we want this to be our grid container.

60
02:47.040 --> 02:50.940
Within this div, let's set its display property to grid.

61
02:51.150 --> 02:52.410
That's all we have to do.

62
02:52.410 --> 02:54.660
And you'll notice that it's added some padding, right?

63
02:54.690 --> 02:56.370
Let's comment that out and save again.

64
02:56.670 --> 02:58.770
You can see, we've got Hello.

65
02:58.800 --> 03:03.300
If we turn it into a grid, it does have default padding and styling.

66
03:03.450 --> 03:04.710
So let's look at our browser

67
03:04.710 --> 03:08.160
now. What's interesting here is have a look - in our DOM

68
03:08.160 --> 03:13.620
we've got this word grid. And if we click on that, we can see our grid now consists of literally one

69
03:13.620 --> 03:16.230
grid, one piece or one box, one cell.

70
03:16.230 --> 03:20.940
And that Hello now is centered within the middle of that cell, that grid.

71
03:20.940 --> 03:26.250
And if you scroll down, you can see here is the default size of that content.

72
03:26.250 --> 03:31.350
Okay, so pretty straightforward. But, a grid without columns and rows is kind of pointless, right?

73
03:31.350 --> 03:37.680
So obviously when we're dealing with grids, we need to create columns and rows.

74
03:37.710 --> 03:44.490
And the two properties we use for that is grid-template-columns and the grid-template-rows property.

75
03:44.490 --> 03:45.630
How do you use them?

76
03:45.630 --> 03:49.020
Well, what better way than to just show you?

77
03:49.890 --> 03:50.250
All right.

78
03:50.250 --> 03:52.710
So we've set its display property to grid.

79
03:52.740 --> 03:56.340
Let's say we want three columns here, grid-template-columns.

80
03:56.340 --> 04:00.020
And now we can define the width of each column.

81
04:00.030 --> 04:03.690
Let's say 100 pixels, 200 pixels and 300 pixels.

82
04:03.690 --> 04:07.680
If we save this, go back to the browser, look at our grid.

83
04:07.770 --> 04:09.960
We've got 3 cells now.

84
04:09.990 --> 04:11.670
How awesome is that?

85
04:11.670 --> 04:18.810
And to show you how this is used, we can literally copy our h2 tag two times, go back to the browser

86
04:18.960 --> 04:19.830
and there we go.

87
04:19.860 --> 04:23.460
They are literally placed at the beginning of every single cell.

88
04:23.580 --> 04:25.170
So it's very, very useful.

89
04:25.170 --> 04:28.020
But like I mentioned, we can also define how many rows we want, right?

90
04:28.020 --> 04:29.400
So we've used grid-template-rows.

91
04:29.430 --> 04:31.410
Now we can use grid-template ....

92
04:31.410 --> 04:33.660
sorry, we've used grid-template-columns,

93
04:33.660 --> 04:38.730
now I want to use grid-template-rows and we can define the height of every row.

94
04:38.760 --> 04:42.720
So let's say 100 pixels, 200 pixels and 300 pixels.

95
04:43.140 --> 04:48.420
If we go to the browser and we now look at our grid, let's just zoom out.

96
04:49.320 --> 04:51.780
We can see the sizes of our grids.

97
04:51.780 --> 04:53.370
And again, it's very useful.

98
04:53.700 --> 05:01.080
We can take our h2's, copy the entire block again, save it, go to our browser and there we go.

99
05:01.110 --> 05:02.270
This is how it works.

100
05:02.280 --> 05:03.420
Very, very useful.

101
05:03.420 --> 05:09.960
So with this said, my dear students, I think we're now ready to start coding our cool form example.

102
05:10.080 --> 05:11.880
Go grab a coffee, go get a Red Bull,

103
05:11.880 --> 05:15.720
whatever motivates you, and I'll see you in the next lecture.