1
00:00:01,050 --> 00:00:07,740
Hello, in this video, I am going to cover all the different grid sizes, so we've already got a basic

2
00:00:07,980 --> 00:00:09,840
grid system right here.

3
00:00:09,990 --> 00:00:16,170
And as a recovering member in the container where all your pages, where content goes, what you're

4
00:00:16,170 --> 00:00:21,690
seeing, not necessarily the CSF and the JavaScript, etc., you need a row inside of it.

5
00:00:21,690 --> 00:00:22,890
You can have multiple rows.

6
00:00:23,070 --> 00:00:25,200
I'm going to have a separate video covering that.

7
00:00:25,500 --> 00:00:31,790
And inside each row you will have one or more columns which span X amount of spaces.

8
00:00:32,010 --> 00:00:37,980
There's a total amount of 12 spaces in each row and you can have any number you want as long as it's

9
00:00:37,980 --> 00:00:39,390
not a decimal.

10
00:00:40,030 --> 00:00:40,830
Okey dokey.

11
00:00:40,860 --> 00:00:45,760
I'm going to hide this just so you're going a bit more to play with.

12
00:00:46,020 --> 00:00:51,540
And first of all, I want to go to this website of Google linked in the description.

13
00:00:51,810 --> 00:00:58,380
And this basically covers all the different sizes of the extra small we covered previously, which is

14
00:00:58,380 --> 00:00:58,880
small.

15
00:00:59,250 --> 00:01:02,480
There's medium, large, extra large and extra extra large.

16
00:01:02,760 --> 00:01:05,890
So these are the conditions.

17
00:01:05,900 --> 00:01:11,700
So if it's less than five hundred seventy six pixels wide and that is the browser width, so that if

18
00:01:11,700 --> 00:01:21,360
there is less than five minutes wide, then it will default to whatever that particular section is in

19
00:01:21,360 --> 00:01:28,570
terms of the amount of spaces it should take in the column with greater than five hundred seventy six.

20
00:01:28,590 --> 00:01:33,450
But I mean greater than or equal to 476, but less than seven, six, eight.

21
00:01:33,450 --> 00:01:37,200
That's just automatically inferred by this, actually.

22
00:01:37,200 --> 00:01:38,790
No, let me rephrase.

23
00:01:38,790 --> 00:01:42,870
If it's greater than five seventy six then you'll be whatever small is.

24
00:01:43,140 --> 00:01:50,010
But it is also a setting for medium which is greater seven hundred sixty eight than this will get set

25
00:01:50,010 --> 00:01:53,690
when he goes above this range, even those technically above this range.

26
00:01:53,820 --> 00:01:54,730
So it goes up.

27
00:01:54,750 --> 00:02:03,060
So this will trickle up all the way for these sizes unless it's a specific size specified a specific

28
00:02:03,690 --> 00:02:07,530
width specified for one of these, but they don't trickle down.

29
00:02:07,530 --> 00:02:14,310
So if I set Norge to six columns, for example, have a medium smaller and more than by default, your

30
00:02:14,310 --> 00:02:15,630
span 12 columns.

31
00:02:15,630 --> 00:02:17,190
So it doesn't go down, but it does go up.

32
00:02:17,340 --> 00:02:21,570
And here all of you see the difference with and they go all the way up to extra extra large.

33
00:02:21,780 --> 00:02:29,700
If you come back from an old bootstrap framework, you might be used to only really having extra small,

34
00:02:29,940 --> 00:02:36,560
small, medium and large, extra large ones in there in the old division within their bootstrap for.

35
00:02:36,690 --> 00:02:39,030
But it depends on what version you come from.

36
00:02:39,040 --> 00:02:40,920
So things have changed.

37
00:02:41,160 --> 00:02:42,480
So the class prefix.

38
00:02:42,660 --> 00:02:51,030
So this is the one we use code from then dash, then the amount of columns with the amount of spaces

39
00:02:51,270 --> 00:02:55,860
we want each column to span and four extra small.

40
00:02:55,860 --> 00:03:01,390
You don't specify access as you used to in bootstrap free in four and five.

41
00:03:01,390 --> 00:03:03,870
We don't do that anymore and you can't do that anymore.

42
00:03:04,080 --> 00:03:09,700
Just pocho dash then the number or whatever property you're trying to effect for extra small.

43
00:03:09,990 --> 00:03:12,180
So let's implement something.

44
00:03:12,210 --> 00:03:14,760
So what we're going to say is extra large

45
00:03:17,370 --> 00:03:29,130
expense spinal column for an extra extra large for extra large, two columns for larger spans, three

46
00:03:29,130 --> 00:03:36,540
columns for medium with four columns for small.

47
00:03:36,540 --> 00:03:38,310
You'll span six columns.

48
00:03:38,490 --> 00:03:39,960
And if we leave.

49
00:03:41,360 --> 00:03:44,010
Across more than E will span 12 columns.

50
00:03:44,090 --> 00:03:50,390
Even if you want it to span 12 columns, I as a habit prefer to put Kodesh 12.

51
00:03:50,390 --> 00:03:53,960
Just so when I'm looking at it, I just know what the size is.

52
00:03:54,210 --> 00:03:55,610
It's just my preference.

53
00:03:55,610 --> 00:03:59,810
But this technically isn't required to see the default property.

54
00:03:59,810 --> 00:04:05,860
So likewise, this would not be required in this scenario.

55
00:04:05,870 --> 00:04:12,470
But if, let's say you wanted large to be 12, you would need to specify that 12 because medium is four

56
00:04:12,470 --> 00:04:15,530
and then that will get tricky unless otherwise overridden.

57
00:04:16,040 --> 00:04:17,500
And the girl.

58
00:04:17,570 --> 00:04:24,020
So let's say that and what we're going to do a copy override this and I'm going to have.

59
00:04:25,750 --> 00:04:28,960
I love a few different instances of these.

60
00:04:35,170 --> 00:04:35,610
Computer.

61
00:04:38,580 --> 00:04:43,760
Look, and I should probably get the job done for now.

62
00:04:43,810 --> 00:04:49,500
This is just optional what I'm doing here, but just so we can easily see the way everything has, because

63
00:04:49,540 --> 00:04:53,110
if they all just say the same thing, we don't know which one is which.

64
00:04:55,030 --> 00:05:00,160
My dog started my first dog started barking on a door.

65
00:05:00,580 --> 00:05:06,670
She can handle that and save the reload.

66
00:05:06,700 --> 00:05:07,240
There we go.

67
00:05:07,240 --> 00:05:12,040
We have 13 different columns you may see on the 13th one.

68
00:05:12,040 --> 00:05:16,540
It's gone on to the next row onto the next row, Motorola.

69
00:05:17,050 --> 00:05:18,600
Two different things.

70
00:05:19,510 --> 00:05:28,080
So the first one, remember, we can only have a total of 12 sections in each row anyway.

71
00:05:28,120 --> 00:05:33,890
And if an extra extra large, each one of these bands, one 12 of them equals 12 in total.

72
00:05:33,910 --> 00:05:38,170
So this has to go into the next in line before story, isn't it?

73
00:05:38,440 --> 00:05:48,520
Now we are in the extra large category where each column spans two of the spaces in the row.

74
00:05:48,950 --> 00:05:52,030
So that means it's only a maximum of six that can fit.

75
00:05:52,270 --> 00:05:54,530
And then we've done the some spacing on each side.

76
00:05:54,550 --> 00:06:00,340
It is even it's just because they feel justified to the left automatically inside each column.

77
00:06:00,370 --> 00:06:05,530
It looks like the little more here, but this actual column probably in the roundabout here and this

78
00:06:05,530 --> 00:06:07,930
one ends round about here, et cetera.

79
00:06:08,320 --> 00:06:14,260
OK, so it's not it's not dependent on the contents inside, but the properties that we've set, some

80
00:06:14,270 --> 00:06:15,240
of those smaller.

81
00:06:15,430 --> 00:06:18,470
So we go to large so that only four of them.

82
00:06:18,700 --> 00:06:25,660
So four times three, if you go to medium and be free on a row, as you can see, automatically adjusting,

83
00:06:25,660 --> 00:06:30,880
if you go to small, they'll just be two on a row of a row on annoying.

84
00:06:31,260 --> 00:06:37,960
Again, sorry for coming on a line that really small the roll on individual lines.

85
00:06:38,170 --> 00:06:45,610
So that is all agreed sizes that extra extra large, extra large, large, medium, small and nexxus

86
00:06:45,610 --> 00:06:47,170
more highly recommend.

87
00:06:47,180 --> 00:06:48,810
If you're coming from a previous version.

88
00:06:48,820 --> 00:06:51,700
Braestrup, go over this one.

89
00:06:51,710 --> 00:06:57,880
You've got to go over really quickly because you already have the sort of mind set about the grid system,

90
00:06:57,880 --> 00:07:00,040
about 12 spaces and all that stuff.

91
00:07:00,220 --> 00:07:02,410
But this has slightly changed.

92
00:07:02,410 --> 00:07:04,660
So recommend that you have a look at it.

93
00:07:05,050 --> 00:07:05,590
That's it.

94
00:07:05,590 --> 00:07:07,870
If you have any questions, feel free to publish a message.

95
00:07:07,870 --> 00:07:11,170
And as usual, I look forward to seeing you in the next video.