1
00:00:01,170 --> 00:00:02,850
Hello and welcome my.

2
00:00:04,190 --> 00:00:10,580
In today's video, we will learn how to modify grid container properties to design responsive letters.

3
00:00:11,640 --> 00:00:15,480
Say we have this list of movie posters.

4
00:00:16,560 --> 00:00:22,760
And what you want to do is convert it into this grid where each group we have five columns, four desktop

5
00:00:22,760 --> 00:00:23,420
screens.

6
00:00:25,090 --> 00:00:27,160
Three columns for tablets.

7
00:00:28,750 --> 00:00:32,220
On Decolonize for mobile screens like this.

8
00:00:33,560 --> 00:00:35,330
All right, so let's get started.

9
00:00:37,170 --> 00:00:43,740
As I mentioned in the previous video, to do me a division grid, we need to use this display grid valley.

10
00:00:43,860 --> 00:00:44,990
So let's start with that.

11
00:00:48,620 --> 00:00:50,100
Let's bring about the issue.

12
00:00:53,370 --> 00:00:53,660
All right.

13
00:00:53,750 --> 00:01:01,880
So this is the debt which tops all the other items, so we'll have to give display grid to this division

14
00:01:02,540 --> 00:01:03,210
coming here.

15
00:01:04,190 --> 00:01:07,380
Also, because that was a maybe so harsh.

16
00:01:08,090 --> 00:01:09,940
Let's see, display grid.

17
00:01:10,970 --> 00:01:12,770
And as you can see, nothing happens.

18
00:01:13,100 --> 00:01:16,390
This property is still browser that day and it's Schulenburg.

19
00:01:16,420 --> 00:01:21,610
Follow now truths and giving a dentist make great changes, nothing by default.

20
00:01:22,190 --> 00:01:27,500
But now they have access to all the great properties, let's say now, and need to define how many columns

21
00:01:27,530 --> 00:01:29,840
each should have for that.

22
00:01:29,870 --> 00:01:33,010
We have this property called Grid Damply columns.

23
00:01:33,680 --> 00:01:34,380
Let's use it.

24
00:01:35,640 --> 00:01:36,650
That's a grid.

25
00:01:38,800 --> 00:01:40,030
Template columns.

26
00:01:41,470 --> 00:01:43,360
So here we can define in the middle of columns.

27
00:01:43,420 --> 00:01:45,000
We are expecting each group.

28
00:01:45,700 --> 00:01:52,930
Let's say we want four bottoms and all these columns should be equal width or in other words, see one

29
00:01:52,960 --> 00:01:53,620
four columns.

30
00:01:54,340 --> 00:01:59,950
I want the entire world to be split equally among these four columns.

31
00:02:00,370 --> 00:02:03,200
So what we can do is we can use a value model.

32
00:02:03,490 --> 00:02:05,330
So this defines split.

33
00:02:05,380 --> 00:02:10,390
All the available space equally amongst the total number of columns that we define you.

34
00:02:11,080 --> 00:02:15,470
So let's take a look at it again and again.

35
00:02:15,940 --> 00:02:18,120
So we specified this one in four times.

36
00:02:18,790 --> 00:02:23,020
So what this means is defined two columns in a row.

37
00:02:23,600 --> 00:02:25,330
Don't give equal with two all.

38
00:02:25,660 --> 00:02:26,400
So let's take it.

39
00:02:27,820 --> 00:02:28,860
Now, as you can see.

40
00:02:29,050 --> 00:02:30,610
But four columns in a row.

41
00:02:31,390 --> 00:02:33,220
Let's start adding some space in between.

42
00:02:33,280 --> 00:02:39,460
So as I mentioned earlier in the boost issue, you have this property called Look Column Gap and great

43
00:02:39,460 --> 00:02:39,770
gap.

44
00:02:40,420 --> 00:02:41,710
So let's try using those.

45
00:02:42,430 --> 00:02:42,940
Let's see.

46
00:02:43,000 --> 00:02:45,670
Great gap, 16 pixels.

47
00:02:46,700 --> 00:02:51,680
So there's just no space of 16 pixels between or rows and columns.

48
00:02:52,460 --> 00:02:58,070
Or we could say rogard, say 32 pixels.

49
00:02:59,240 --> 00:03:06,200
As you can see here, there is a space of 32 pixel between these two rows.

50
00:03:07,530 --> 00:03:10,200
Similarly, let's try and cleansing the column.

51
00:03:10,620 --> 00:03:17,150
Let's say 48, it serves, as you can see, the space between these cards.

52
00:03:17,220 --> 00:03:20,280
It's all these columns is what the apexes.

53
00:03:20,370 --> 00:03:22,590
So let's just bring it back to it since.

54
00:03:24,510 --> 00:03:28,770
Now, what we needed was five items in a room.

55
00:03:30,010 --> 00:03:36,280
So to make that what we can do is simply just add one more order to the table.

56
00:03:37,390 --> 00:03:42,850
And as you can see, we've got five CVT lipsticks, so we could have one more.

57
00:03:43,960 --> 00:03:48,350
And this would give us six columns in each room.

58
00:03:49,790 --> 00:03:50,040
All right.

59
00:03:50,090 --> 00:03:51,560
So let's just bring it back to Frank.

60
00:03:53,550 --> 00:03:59,580
So right now, it's divided equally amongst all the column save, you wanted to get specific lives,

61
00:04:00,280 --> 00:04:06,960
save you on the first column to me, 200 pixels, second column to me, just a hundred pixels.

62
00:04:08,640 --> 00:04:10,760
Third column to me say.

63
00:04:12,030 --> 00:04:13,340
Dr. Deep exults.

64
00:04:14,940 --> 00:04:22,130
Food golem to be 500 pixels on, lost volume, to be hundred fifty pixels, let's say red.

65
00:04:23,040 --> 00:04:29,010
And as you can see, all these different columns have different ways because you define different width

66
00:04:29,010 --> 00:04:30,120
for these columns.

67
00:04:30,420 --> 00:04:30,690
All right.

68
00:04:30,720 --> 00:04:32,970
So let's just bring it back to different now.

69
00:04:33,660 --> 00:04:40,010
So let's see until autumn, 12, 12 too often.

70
00:04:40,920 --> 00:04:42,420
So they've given five orders here.

71
00:04:42,450 --> 00:04:44,520
That means five columns.

72
00:04:44,940 --> 00:04:45,160
All right.

73
00:04:45,180 --> 00:04:47,510
So that does the job now.

74
00:04:48,000 --> 00:04:52,290
And as you can see, the entire upgraded spanning across the world.

75
00:04:52,990 --> 00:04:55,340
Now, let's say you want everything to be in the start.

76
00:04:55,470 --> 00:04:58,130
So we could do justice by content.

77
00:04:59,540 --> 00:05:01,210
Unseen star Sindelar.

78
00:05:02,580 --> 00:05:07,890
And as you can see, nothing changes because you specify the group to date the entire with.

79
00:05:08,820 --> 00:05:11,460
So for that, let's try changing the words for now.

80
00:05:12,060 --> 00:05:13,880
So let's say set off these Ordos.

81
00:05:13,980 --> 00:05:14,790
Let's give them.

82
00:05:16,320 --> 00:05:18,420
Hundred fifty pixels each.

83
00:05:19,510 --> 00:05:22,900
So we needed five, two, three, four, five on the table.

84
00:05:23,860 --> 00:05:26,430
And as you can see, my diagram isn't the star.

85
00:05:26,710 --> 00:05:28,110
So towards the left.

86
00:05:29,790 --> 00:05:35,480
Similarly, see, I wanted everything to be at the end of the right so I could simply use this value

87
00:05:35,580 --> 00:05:40,030
in or I wanted my diagram to be in the center of the screens.

88
00:05:40,080 --> 00:05:45,900
Like with System Center or letting you want to utilize this left hand like space.

89
00:05:46,380 --> 00:05:52,410
So for that, we could do, say, space between so all the space would be divided equally in between

90
00:05:52,410 --> 00:05:53,160
these columns.

91
00:05:53,220 --> 00:06:01,110
So as you can see you or you want to disgrace to me around some dust and case we could do space around.

92
00:06:01,560 --> 00:06:05,310
And now we've got space on the left and right side of the grid as well.

93
00:06:06,330 --> 00:06:08,270
That's how you can align your grid with.

94
00:06:08,570 --> 00:06:12,390
Left, right, center or odd space in between or around.

95
00:06:13,170 --> 00:06:13,520
All right.

96
00:06:13,530 --> 00:06:16,020
So now let's just bring everything back to the way it was.

97
00:06:16,260 --> 00:06:18,390
So let's assume it does justify quantum.

98
00:06:19,800 --> 00:06:27,800
And instead of those hundred fifty pixels, let's make it up to one, two, three, four, five.

99
00:06:29,080 --> 00:06:29,490
The team.

100
00:06:30,640 --> 00:06:35,830
And as you can see, the bodies find columns in each of these five cards in each floor.

101
00:06:37,060 --> 00:06:37,790
Now, moving on.

102
00:06:38,540 --> 00:06:43,130
So what we want is to have just three guards, four tablet screens.

103
00:06:44,050 --> 00:06:46,100
And to go to split mobile screens.

104
00:06:46,390 --> 00:06:48,330
So for that, we can use mediocrities.

105
00:06:49,700 --> 00:06:51,250
So let's adamantly agree here.

106
00:06:52,480 --> 00:06:53,300
So media.

107
00:06:56,250 --> 00:06:57,160
Marks would.

108
00:06:59,430 --> 00:07:05,020
Saying 900 dark suits under one book are golden number of.

109
00:07:05,950 --> 00:07:09,570
So let's just copy the scenario listed here.

110
00:07:14,260 --> 00:07:21,100
So this Ratones minister is saying much more to one does we just want to bottom so we can remove these

111
00:07:21,100 --> 00:07:26,930
extra that seem it, let us inspect, try opening it on an eye pattern.

112
00:07:27,280 --> 00:07:28,840
So coming here.

113
00:07:30,080 --> 00:07:33,320
And as you can see, we've just got these three problems.

114
00:07:34,680 --> 00:07:40,680
Similarly, from white screens, we just want to do so, we can add another made, really, so Midia

115
00:07:42,930 --> 00:07:46,230
Knox would say four hundred pixels.

116
00:07:49,260 --> 00:07:50,720
That's just Sculpey, this.

117
00:07:53,220 --> 00:07:56,670
So instead of three, you just need to save it.

118
00:07:58,020 --> 00:07:58,870
Let's start changing.

119
00:07:59,050 --> 00:08:00,490
Two more did you four.

120
00:08:01,230 --> 00:08:07,470
And as you can see, we just got to do in each room or say we just wanted one so we could remove this

121
00:08:07,470 --> 00:08:11,650
also and we would just have one in each room.

122
00:08:12,620 --> 00:08:16,840
And guys, that's how you can use grid and grid WD to design response.

123
00:08:16,920 --> 00:08:17,880
Now it's.

124
00:08:18,990 --> 00:08:20,100
That's all for today, guys.

125
00:08:20,160 --> 00:08:22,260
If there's something that you would not understand.

126
00:08:22,470 --> 00:08:24,120
Feel free to drop a comment on.

127
00:08:24,120 --> 00:08:24,990
We will discuss it.

128
00:08:25,770 --> 00:08:26,840
See you in the next video.

129
00:08:27,010 --> 00:08:27,300
Bye.

130
00:08:27,370 --> 00:08:28,070
And take care.