Coding a Flexbox Grid System

[00:00:00]
>> And so this is gonna start with a display of flex and a flex flow of row wrap, just like I told you before. By default, it'll do a row but by default it'll also do no wrap, we do actually want it to wrap onto other lines. Then I'm gonna say justify content space between.

[00:00:31]
Okay, it looks a little odd at the moment but just putting the space in between the boxes. And then we can add to this a gap of 4%. So in some of my previous courses, we've actually had to calculate what this gap is and work with it. Now we can actually just declare it like this with this new gap property, which is really nice.

[00:00:57]
Obviously that's not quite the look we were looking for, so let's continue writing some CSS here. So if I just say my figure has a flex basis of something like 22%. That will go ahead and put my boxes here all on the first row. Now, where did I get those numbers from?

[00:01:21]
I'm sure you were wondering, where did I get 22% from? Where do I get, for my next row here with my next two set of boxes how are we going to specify the flex basis for those. And how do we know how the math works out, so let me show you how that works.

[00:01:38]
So let's draw out for example our four boxes. There they are one, two, three, four and we've already set our gap to be 4% each, so here's 4%, 4%, 4% because there's a space between, so there's no gap on the outside of these boxes. There's only a gap in between, so that is our layout for a four box layout.

[00:02:11]
So that's 12%, right? 12%, four plus four plus four 12%, subtract that from 100% and we wind up with 88%. That's what we have left over. So now we'll have to divide that by four and we wind up with 22% that gonna be the width of each of our boxes in order to make this add up to 100% on our row.

[00:02:40]
>> The gap is only for horizontal spacing or is it also associated with access concepts?
>> Well, because we have all of these contained inside of a row, this gap is only going to be in between our boxes. If we had our flex boxes all wrapping onto another, just wrapping in space all the way down the page as opposed to putting them in artificial rows, I think you get a little bit of gap in between the rows as well.

[00:03:07]
But that is not a thing with the markup that we have here. All right, so now, if I were to make a double box, right? I want this to span across two of these columns on the page. So I have 22%, right? And 22% in my two boxes.

[00:03:33]
So this larger box is gonna have to be 22 + 22 + 4, right? That gap in between. So that total comes to 48%, right? So, let's set that up. Let's set up a class here, we'll call it span two. And we'll set the flex basis to 48%, okay?

[00:04:14]
Set the flex basis to 48%. Then all we need to do is apply that class here in our HTML. So here on row two, we have these two figures and I am going to say a figure has a class of span two. And the next figure has a class of span two.

[00:04:41]
So there we go. All of our boxes are all lining up very, very nicely, okay? If you do wind up wanting a little bit of space in between these rows. You could certainly add here to your row class, you could do something like margin bottom, for example, of whatever one REM or something.

[00:05:03]
That would give you a little bit of space in between the rows if that was important to you, all right? Or you could just leave that out it just sort of depends on what your design is and what it is you're trying to build as to whether you would include that or not.

[00:05:22]
Okay, so I'm gonna give you like 30 seconds. See if you can figure out what the values then would be for span three and span four. These are going to be the classes that we're going to apply here on row number three. So we have one box that's gonna take up three columns, one box that takes up one column.

[00:05:50]
And then on row four we have one giant box going all the way across the row. So, do some quick math, and see if you can figure out what those happen to be. Okay, so let's just check in on that then. So here on row number three, we're gonna have our figure with a class of span three, right?

[00:06:12]
And here on row four, we're gonna have a figure with a class of span four. So that's pretty simple on the HTML. And then here in our CSS, what are these values wind up being? So our flex basis is going to be what? Anybody? Does anybody know? Can you put it in the chat?

[00:06:34]
>> Seeing several different answers
>> Several different answers. Okay.
>> 74%, 72%, 76%, 74%.
>> 72%, 74%, 76%, which one is it? Okay, so let's see. We've got now four boxes or three boxes, right? So one, two, three, 22, 22, 22, right? So far so good at 66 and then we've got 4 and 4.

[00:07:09]
So another 8 in between, you don't have to worry about the space that's on the outside of the box cuz there isn't any, using space between so there's no outside space. It's only in between the boxes that we have the gap. So if you said 74% you are a winner, nicely done.

[00:07:31]
Okay, so when we go back here it'll be 74%. And then for span 4, what is its flex basis?
>> 100.
>> A 100%. Hopefully you said 100%, four boxes of 22% each that's 88%, three gaps of four each, that's another 12. So it winds up being 100%.

[00:07:58]
So we've got our row one, that looks good. Row two, that looks good. Row three, that looks good. Row four is stretching all the way across. The only last thing we have to do now here is with row number five. And if we take a look at our HTML in row number five I set a one to one distribution.

[00:08:23]
But I'm actually going to put here for the first figure I'm gonna say span or class equals span two. Because we may actually want this particular box presumably the bigger box has got the important information in it. So in terms of the order on the page we will want that to be listed first in the row and then the supporting elements which are presumably in the smaller boxes are going to be here later in this row.

[00:08:57]
Sorry we actually don't even need to put any classes in here for this. So we should have then one fat box, right? There it is, our span of two and then there's two individuals. So now how are we going to make this go to that one to one configuration that I mentioned what do we do?

[00:09:23]
Anybody have any suggestions for what we could do to fix that problem? Anyone have any suggestions in the chat?
>> Order?
>> Order, yep, so we're gonna set up some order properties. And so I'm just gonna call mine order-1 which will have order one [LAUGH]. Order-2 we'll be order two and order-3 will be order number three, okay?

[00:10:04]
So we can just set those up as individual classes. And then once you have those in place you can just apply them to your HTML. So we now have a class of span two, and the class of order-2. So both remember classes you can stack up more than one in your individual declarations.

[00:10:27]
And then maybe this one here, the second figure will have a class of order-1. And maybe this last one will have a class of order-3. If you scroll on down there, it should all work out for you.
>> Just in terms of, if any of the elements had focusable elements inside of them we wouldn't want to change the order for accessibility reasons, right?

[00:11:04]
>> Yeah, you definitely have to factor that into your choice of ordering and so forth here, yes absolutely