- 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.