Hello, in this video, I am going to cover all the different grid sizes, so we've already got a basic
grid system right here.
And as a recovering member in the container where all your pages, where content goes, what you're
seeing, not necessarily the CSF and the JavaScript, etc., you need a row inside of it.
You can have multiple rows.
I'm going to have a separate video covering that.
And inside each row you will have one or more columns which span X amount of spaces.
There's a total amount of 12 spaces in each row and you can have any number you want as long as it's
not a decimal.
Okey dokey.
I'm going to hide this just so you're going a bit more to play with.
And first of all, I want to go to this website of Google linked in the description.
And this basically covers all the different sizes of the extra small we covered previously, which is
small.
There's medium, large, extra large and extra extra large.
So these are the conditions.
So if it's less than five hundred seventy six pixels wide and that is the browser width, so that if
there is less than five minutes wide, then it will default to whatever that particular section is in
terms of the amount of spaces it should take in the column with greater than five hundred seventy six.
But I mean greater than or equal to 476, but less than seven, six, eight.
That's just automatically inferred by this, actually.
No, let me rephrase.
If it's greater than five seventy six then you'll be whatever small is.
But it is also a setting for medium which is greater seven hundred sixty eight than this will get set
when he goes above this range, even those technically above this range.
So it goes up.
So this will trickle up all the way for these sizes unless it's a specific size specified a specific
width specified for one of these, but they don't trickle down.
So if I set Norge to six columns, for example, have a medium smaller and more than by default, your
span 12 columns.
So it doesn't go down, but it does go up.
And here all of you see the difference with and they go all the way up to extra extra large.
If you come back from an old bootstrap framework, you might be used to only really having extra small,
small, medium and large, extra large ones in there in the old division within their bootstrap for.
But it depends on what version you come from.
So things have changed.
So the class prefix.
So this is the one we use code from then dash, then the amount of columns with the amount of spaces
we want each column to span and four extra small.
You don't specify access as you used to in bootstrap free in four and five.
We don't do that anymore and you can't do that anymore.
Just pocho dash then the number or whatever property you're trying to effect for extra small.
So let's implement something.
So what we're going to say is extra large
expense spinal column for an extra extra large for extra large, two columns for larger spans, three
columns for medium with four columns for small.
You'll span six columns.
And if we leave.
Across more than E will span 12 columns.
Even if you want it to span 12 columns, I as a habit prefer to put Kodesh 12.
Just so when I'm looking at it, I just know what the size is.
It's just my preference.
But this technically isn't required to see the default property.
So likewise, this would not be required in this scenario.
But if, let's say you wanted large to be 12, you would need to specify that 12 because medium is four
and then that will get tricky unless otherwise overridden.
And the girl.
So let's say that and what we're going to do a copy override this and I'm going to have.
I love a few different instances of these.
Computer.
Look, and I should probably get the job done for now.
This is just optional what I'm doing here, but just so we can easily see the way everything has, because
if they all just say the same thing, we don't know which one is which.
My dog started my first dog started barking on a door.
She can handle that and save the reload.
There we go.
We have 13 different columns you may see on the 13th one.
It's gone on to the next row onto the next row, Motorola.
Two different things.
So the first one, remember, we can only have a total of 12 sections in each row anyway.
And if an extra extra large, each one of these bands, one 12 of them equals 12 in total.
So this has to go into the next in line before story, isn't it?
Now we are in the extra large category where each column spans two of the spaces in the row.
So that means it's only a maximum of six that can fit.
And then we've done the some spacing on each side.
It is even it's just because they feel justified to the left automatically inside each column.
It looks like the little more here, but this actual column probably in the roundabout here and this
one ends round about here, et cetera.
OK, so it's not it's not dependent on the contents inside, but the properties that we've set, some
of those smaller.
So we go to large so that only four of them.
So four times three, if you go to medium and be free on a row, as you can see, automatically adjusting,
if you go to small, they'll just be two on a row of a row on annoying.
Again, sorry for coming on a line that really small the roll on individual lines.
So that is all agreed sizes that extra extra large, extra large, large, medium, small and nexxus
more highly recommend.
If you're coming from a previous version.
Braestrup, go over this one.
You've got to go over really quickly because you already have the sort of mind set about the grid system,
about 12 spaces and all that stuff.
But this has slightly changed.
So recommend that you have a look at it.
That's it.
If you have any questions, feel free to publish a message.
And as usual, I look forward to seeing you in the next video.