- I wanna show you example of nesting Flexbox and Grid together
to create a layout using the modern tools that we have now. If you go to labs.jensimmons.com, you'll see this example here. I can click and check it out. This is the kind of
layout that we do a lot, teaser cards, in kind of a grid layout, and you can see that
this is fully responsive. As I make the browser window smaller, everything kinda squishes around. Now, this is the kind of layout that we've been trying
the last couple years to do with Flexbox. Flexbox has some advantages over floats or a float-based framework, but
the tricky part with Flexbox is that this card that's on
the bottom of this layout at the moment will want naturally to be the full width of the
space that's available. Or here, it's got one, two, three cards across the first row, but the second row, Flexbox will wanna calculate these giving each one half of
the space that's available. We don't want that. We want the layout that
you're seeing right now. Now, there is a way to use Flexbox and kind of put widths on Flexbox, but, in a way, the moment you
start setting specific widths on things in Flexbox, you're sort of not getting the advantages of Flexbox, plus you have to write
a lot of code to do that with a lot of media queries. And instead, we can use CSS Grid. CSS Grid is gonna give
us a much better layout without fighting the tool
because this is what Grid was invented to do. And then, I've got the layout of each one of these cards using Flexbox. So, let's look at the markup
and I'll explain what I mean. You can see here that I start
this with a main element, and inside this main element
I have several articles. So here's an article, here's an article, here's an article, here's an article. Each one of these articles
is one of these cards. The article elements are
direct children of the main, so we're gonna put a Grid
container on the main, and then each one of the
articles becomes a Grid item. We're also gonna make
each one of these articles into a Flex container, and
then the h1, the p, the ul, the image, the button, these
things will be Flex items in the Flexbox formatting context. And you can see here, like if
you look at the running code, you can see that the order of
the content visually is image, title, description, paragraph,
list, if there is one, and this buy button. In the markup, however,
you can see the order is headline first, then the
paragraph, then the list, then the image, then the button. So the image is kinda sandwiched
into the middle of things rather than being first. This is actually better for accessibility. It's better to start with the headline and have the image somewhere down further. So, it's a small tweak, but
because Flexbox let's us change the order, it's a way
in which we can make things slightly more accessible. You do need to be careful though. Anytime you use either Flexbox or Grid to rearrange the visual
order and make it different than the content order, you
really need to think through what's gonna happen for folks
who are using a keyboard to tab through the elements in the page, and make sure you don't screw that up. In general, don't change
the visual order too much. Just make small tweaks. So, let's look at the
running code over here again. If I say inspect element, I can dig in. And here you can see, right,
these are the articles. Here on the main, I've got display, grid, grid-template-columns, repeat,
auto-fit, minmax 300 to 1fr, which is basically saying, browser, I want you to make columns. You decide how many. You decide how many are gonna fit using the auto-placement algorithm. I want each of those columns
to be a minimum of 300 pixels and a maximum of sharing the
space so that each of them are the same as each other, 1fr. We also have here a grid-gap of 1rem. That means the browser's
gonna automatically make more columns, or remove columns, depending on how much space
is available in the viewport. We don't have to tell it when to switch the number of columns. We don't have to tell
it at what breakpoint. There are no media queries
in this grid-based layout. It just works. Then, we can see here, here's my article. The article says, `display: flex`. `flex-flow: column`, which changes
the flex flowing direction into the columnar direction,
which makes it lay out in a vertical fashion rather
than a horizontal fashion. For the most part, these
things, the items here, are in fact in content order. You can see this image I've put in. `order: -1`, on it to make
it go first in the order, and `align-self: center`, to center it in the space that's available. Then the question is, of course, what do we do for folks
who don't have Grid. There are quite a few people
who still don't have Grid. That's why I'm using
Flexbox to do the layout inside the cards. I could use Grid to do the
layout inside the cards, but far more people have
browsers that support Flexbox than support Grid. So, let me use the older technology so that more people have coverage, and I'll use Grid for
the folks who have Grid. But, let's also think about
the folks who don't have Grid. So, you can see here in my CSS that I have structured my code so that I've got here — I'm
gonna start with the layout for folks who don't have Grid. And then, inside a @support statement, inside a feature query, I'm gonna say, `@supports (display: grid)`,
which is a little test. If you have Grid, run this code. If you don't, skip all of this code. And I'm going to, first I'm
gonna kinda undo the layout that I did for the fall backs. So, the fall back layout, I
needed to add a max-width, and add some margins, but
for the Grid-based layout, I don't want that. So, I'm gonna set my
max-width to 10,000 pixels instead of 500 pixels, and
I'm gonna set all my margins to zero instead of having a
left-right margin of auto. And I'm gonna take off
the top and bottom margin on the article and set
that to zero as well. And then, this is the layout in Grid. This is the entire Grid-based
layout to layout those cards. `display: grid;`
`grid-template-columns`, `grid-gap`. That's all I need. All of the rest of this CSS is the styling that you see here and it has to do with the Flex-based layout. But, this is it, right here. This is it for my entire
Grid-based layout. A lot of people, they sort
of make the assumption when they learn about Grid and the need to write a fall back layout, they kind of assume that it's
gonna be really complicated. And honestly, the more I do
this, the more examples I make, the easier and easier it seems, and I think, gosh, this isn't hard at all. Now, of course, this is a simple layout for just these cards on
just this part of the page, and maybe my entire website
is much more complicated. Maybe this is in the middle,
and I got a lot of stuff going on with the header,
and a sidebar, and a footer, and other parts of the page. But, for this particular use of Grid, creating a fall back just
for that isn't so hard, and I can think about
each of those other items in isolation. I can think about the header layout. Maybe I don't use Grid at all. I can think about the footer
where I have used Grid, but I can write a different fall back for that particular use of Grid. This is how we're gonna
work our new system. So, let's look over here. I can look at my layout. Now, let's say I wanna test
my layout for no Grid support. Well, how the heck am I gonna do that? I am here on a Macintosh computer, and all the desktop browsers
at this point support Grid. I didn't save one of the
old ones from last year, so I don't have one that
doesn't support Grid. So, a quick thing I can
do is I can come in here to my code where it says,
`@supports (display: grid)`, and I can just like
misspell the word Grid, because nobody supports gggggggrid. I can hit save and refresh my page, and now I have a browser
that's gonna not run that code, and I'm gonna see the layout
and what it is that I got. This is how I wrote this layout in the first place, actually. I wrote the Grid-based layout first, and then I misspelt it in
order to get this feature query to fail, and then I went ahead and wrote these kinds of, the
layout for the browsers that don't have Grid. And then I fixed this and set
this back to the proper word, Grid, and then I wrote this code here to make the adjustments to make it work, the overrides to undo
the non-Grid-based layout to make sure that it
works in both situations. That's how you can use Grid today. That's how you can mix Grid with Flexbox. That's how we're gonna
nest different kinds of formatting contexts
one inside of another.
