Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
CSS Grid is not meant to replace Flexbox. Flexbox and Grid are complementary layout tools, and each has their specialties.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up