1
00:00:01,280 --> 00:00:08,610
Hello, in this video, I am going to show you how to nest multiple rows and columns, pretty simple.

2
00:00:08,780 --> 00:00:12,280
We have this single rope and we have three columns in here.

3
00:00:12,890 --> 00:00:24,170
They stand they take up six of the spaces in the 12 grid space so we can get two on any single line.

4
00:00:24,320 --> 00:00:27,860
But inside of any column, we can have a. a rope.

5
00:00:28,120 --> 00:00:35,150
So what that allows us to do is get rid of this, for example, for div, if it's the same format and

6
00:00:35,240 --> 00:00:44,360
normally world class row, then in here you can have what you normally have in a row directly, which

7
00:00:44,360 --> 00:00:45,280
is columns.

8
00:00:45,880 --> 00:00:47,900
So today class

9
00:00:50,780 --> 00:00:55,340
where I want to put is called Dasch XXL Destry.

10
00:00:55,340 --> 00:01:00,760
You can put whatever combination you want, however many you want, whatever breakpoints you want with

11
00:01:00,800 --> 00:01:02,350
a number of greenspace.

12
00:01:02,360 --> 00:01:03,770
You want that totally up to you.

13
00:01:04,130 --> 00:01:08,000
This often demonstrates the the use case of this.

14
00:01:08,600 --> 00:01:13,440
And 12, I'll put literally the number one here.

15
00:01:13,670 --> 00:01:19,430
So this just means for the extra extra large screen size, it's going to take three of the 12 spaces

16
00:01:19,430 --> 00:01:21,660
within this row within this column.

17
00:01:21,950 --> 00:01:24,140
This is going from medium.

18
00:01:25,110 --> 00:01:32,490
Up to now, including because we've overridden, he has a medium and large would take six and so this

19
00:01:32,490 --> 00:01:37,890
is extra small and small, they all take 12 to duplicate this.

20
00:01:37,900 --> 00:01:46,710
So we have again, many of you want to have for that should be enough to demonstrate what the purpose

21
00:01:46,710 --> 00:01:47,380
of this is.

22
00:01:47,700 --> 00:01:48,820
So let me say this.

23
00:01:49,060 --> 00:01:51,300
So we get one, two, three and four.

24
00:01:51,450 --> 00:01:53,180
They are equally spaced out.

25
00:01:53,270 --> 00:01:58,980
My thinking, why the no, not much of a gap on the left, again, is just because of the text alignment

26
00:01:59,370 --> 00:02:00,600
that you would get with this.

27
00:02:00,600 --> 00:02:06,400
But if you were to put a, you know, a colored border around these columns, which are the next steps,

28
00:02:06,430 --> 00:02:07,320
correct me you do.

29
00:02:07,470 --> 00:02:10,500
You can see they are all the same size.

30
00:02:10,620 --> 00:02:14,460
Obviously, the way you align your text center right left us totally up to you.

31
00:02:14,850 --> 00:02:24,030
What will happen if I reduce it's gone now to large, which is applied by this medium breakpoint.

32
00:02:24,030 --> 00:02:30,060
Remember Tricolore until it hits a break point that will override for that particular breakpoint.

33
00:02:30,390 --> 00:02:33,600
So we've got medium and large and if we go a little smaller.

34
00:02:39,370 --> 00:02:45,250
I think they eat another breakpoint, but because they was for medium, which is still six before any

35
00:02:45,250 --> 00:02:48,340
smaller than medium to be small now.

36
00:02:49,370 --> 00:02:50,840
Or still medium.

37
00:02:54,140 --> 00:03:02,420
There we go, we are it's more of a to explore, not just yeah, I went from XXL to large Inuksuit explaining

38
00:03:02,430 --> 00:03:08,630
that's why there's an extra point and now it is a small and will eventually lead to an extra small.

39
00:03:08,660 --> 00:03:09,620
So there we go.

40
00:03:09,630 --> 00:03:14,840
So that in one nest, in rows and columns allow you to do really simple.

41
00:03:14,840 --> 00:03:17,800
If you have any questions, feel free to point me a message.

42
00:03:17,810 --> 00:03:21,650
And as usual, I look forward to seeing you in the next video.