Preview
Video Player
00:00
00:00
Using Grid with Flexbox
3:59CSS Grid is not meant to replace Flexbox. Flexbox and Grid are complementary layout tools, and each has their specialties.
CSS grid is not meant to replace Flexbox.
0:00
Flexbox and
0:03
Grid are actually complimentary layout
tools, and each have their specialties.
0:04
As you learned, at the beginning of
the course, the biggest difference between
0:09
the two is that Flexbox lays out items in
a single dimension, in a row, or a column,
0:12
and Grid lays out items in two dimensions,
rows and columns at the same time.
0:17
So before we wrap up,
I'll demonstrate why Grid and
0:22
Flexbox together
are a powerful combination.
0:25
You can launch the new workspace with this
video to code along, or kick back for
0:28
a bit and just watch,
then try it for yourself later.
0:33
In the HTML I have six card
items inside a main content div.
0:35
Now they are not laid out using Grid yet,
0:42
so first I'll turn on the Grid,
in layout.css.
0:46
I'll set main-content display: grid.
0:50
Then set column tracks with
grid-template-columns.
0:54
I'll use repeat notation to auto-fit
items inside the grid container.
1:00
So I want the columns to be no
narrower than 280 pixels, but
1:07
expand to take up any free space.
1:12
So I'll set a minimal(280px, 1fr) and
1:15
I'll apply a grid-gap: 20 px.
1:21
So I've quickly set up a responsive
three column layout with grid.
1:30
Now I'd like to align all the learn
more buttons with the bottom
1:35
edge of each card regardless of
the amount of content inside them
1:40
that way they all line up
perfectly across the page.
1:44
Well what Flexbox does best is align and
distribute space within a single access.
1:48
You learn that a grid item, can also be a
grid container, that's how you nest grids.
1:54
Well a grid item can
also be a flex container,
1:59
that lays out its children with Flexbox.
2:02
So Flexbox is what works
best in this situation,
2:04
to make aligning buttons
to the bottom edges easier.
2:08
So I'll make the card items flex
containers so that I can have full control
2:11
over the direction and
alignment of the content inside them.
2:15
In my style sheet I'll target the class
.card and set its display: flex.
2:19
Now I'll need to set the card's
flex-direction: column.
2:31
That way the content gets vertically
stacked inside the cards.
2:41
Finally, I'll select the buttons and
give them a margin top property.
2:45
When I set the value to auto it pins
the buttons to the bottom of the cards.
2:54
Remember Flexbox and
CSS Grid are good at different things, and
3:01
should be used together,
not as alternatives to each other.
3:05
You can use Grid to place your main
content inside columns and rows, and
3:09
use Flexbox to position the smaller
details of your design like buttons and
3:15
navigation menus.
3:19
CCS Grid gives you a whole
new set of tools for
3:22
building complex layouts in less time.
3:25
As you continue to explore the
capabilities of Grid you'll realize that
3:27
there are different methods for
creating the same end result.
3:31
So I encourage you to keep practicing,
and experimenting with Grid, and
3:35
begin using it in your projects
to create common layout patterns.
3:38
We've only just scratched the surface
of what's possible with CSS Grid.
3:42
So be sure to review the Grid resources
posted in the teacher's notes,
3:46
and we're always here to help.
3:49
So if you have questions about
anything covered in this course,
3:51
feel free to reach out to the Treehouse
staff or other students in the community.
3:53
Thanks everyone and happy coding.
3:57