1
00:00:00,320 --> 00:00:03,795
CSS grid is not meant to replace Flexbox.

2
00:00:03,795 --> 00:00:04,460
Flexbox and

3
00:00:04,460 --> 00:00:09,180
Grid are actually complimentary layout
tools, and each have their specialties.

4
00:00:09,180 --> 00:00:12,620
As you learned, at the beginning of
the course, the biggest difference between

5
00:00:12,620 --> 00:00:17,920
the two is that Flexbox lays out items in
a single dimension, in a row, or a column,

6
00:00:17,920 --> 00:00:22,570
and Grid lays out items in two dimensions,
rows and columns at the same time.

7
00:00:22,570 --> 00:00:25,610
So before we wrap up,
I'll demonstrate why Grid and

8
00:00:25,610 --> 00:00:28,990
Flexbox together
are a powerful combination.

9
00:00:28,990 --> 00:00:33,065
You can launch the new workspace with this
video to code along, or kick back for

10
00:00:33,065 --> 00:00:35,867
a bit and just watch,
then try it for yourself later.

11
00:00:35,867 --> 00:00:42,873
In the HTML I have six card
items inside a main content div.

12
00:00:42,873 --> 00:00:46,287
Now they are not laid out using Grid yet,

13
00:00:46,287 --> 00:00:50,540
so first I'll turn on the Grid,
in layout.css.

14
00:00:50,540 --> 00:00:54,670
I'll set main-content display: grid.

15
00:00:54,670 --> 00:01:00,899
Then set column tracks with
grid-template-columns.

16
00:01:00,899 --> 00:01:07,840
I'll use repeat notation to auto-fit
items inside the grid container.

17
00:01:07,840 --> 00:01:12,450
So I want the columns to be no
narrower than 280 pixels, but

18
00:01:12,450 --> 00:01:15,350
expand to take up any free space.

19
00:01:15,350 --> 00:01:21,445
So I'll set a minimal(280px, 1fr) and

20
00:01:21,445 --> 00:01:26,140
I'll apply a grid-gap: 20 px.

21
00:01:30,680 --> 00:01:34,570
So I've quickly set up a responsive
three column layout with grid.

22
00:01:35,620 --> 00:01:40,330
Now I'd like to align all the learn
more buttons with the bottom

23
00:01:40,330 --> 00:01:44,800
edge of each card regardless of
the amount of content inside them

24
00:01:44,800 --> 00:01:48,208
that way they all line up
perfectly across the page.

25
00:01:48,208 --> 00:01:54,890
Well what Flexbox does best is align and
distribute space within a single access.

26
00:01:54,890 --> 00:01:59,230
You learn that a grid item, can also be a
grid container, that's how you nest grids.

27
00:01:59,230 --> 00:02:02,580
Well a grid item can
also be a flex container,

28
00:02:02,580 --> 00:02:04,975
that lays out its children with Flexbox.

29
00:02:04,975 --> 00:02:08,340
So Flexbox is what works
best in this situation,

30
00:02:08,340 --> 00:02:11,700
to make aligning buttons
to the bottom edges easier.

31
00:02:11,700 --> 00:02:15,860
So I'll make the card items flex
containers so that I can have full control

32
00:02:15,860 --> 00:02:19,110
over the direction and
alignment of the content inside them.

33
00:02:19,110 --> 00:02:26,477
In my style sheet I'll target the class
.card and set its display: flex.

34
00:02:31,310 --> 00:02:35,884
Now I'll need to set the card's
flex-direction: column.

35
00:02:41,916 --> 00:02:45,745
That way the content gets vertically
stacked inside the cards.

36
00:02:45,745 --> 00:02:52,450
Finally, I'll select the buttons and
give them a margin top property.

37
00:02:54,380 --> 00:02:59,910
When I set the value to auto it pins
the buttons to the bottom of the cards.

38
00:03:01,930 --> 00:03:05,728
Remember Flexbox and
CSS Grid are good at different things, and

39
00:03:05,728 --> 00:03:09,930
should be used together,
not as alternatives to each other.

40
00:03:09,930 --> 00:03:15,090
You can use Grid to place your main
content inside columns and rows, and

41
00:03:15,090 --> 00:03:19,750
use Flexbox to position the smaller
details of your design like buttons and

42
00:03:19,750 --> 00:03:20,510
navigation menus.

43
00:03:22,590 --> 00:03:25,276
CCS Grid gives you a whole
new set of tools for

44
00:03:25,276 --> 00:03:27,753
building complex layouts in less time.

45
00:03:27,753 --> 00:03:31,617
As you continue to explore the
capabilities of Grid you'll realize that

46
00:03:31,617 --> 00:03:35,380
there are different methods for
creating the same end result.

47
00:03:35,380 --> 00:03:38,870
So I encourage you to keep practicing,
and experimenting with Grid, and

48
00:03:38,870 --> 00:03:42,840
begin using it in your projects
to create common layout patterns.

49
00:03:42,840 --> 00:03:46,319
We've only just scratched the surface
of what's possible with CSS Grid.

50
00:03:46,319 --> 00:03:49,715
So be sure to review the Grid resources
posted in the teacher's notes,

51
00:03:49,715 --> 00:03:51,410
and we're always here to help.

52
00:03:51,410 --> 00:03:53,884
So if you have questions about
anything covered in this course,

53
00:03:53,884 --> 00:03:57,800
feel free to reach out to the Treehouse
staff or other students in the community.

54
00:03:57,800 --> 00:03:59,050
Thanks everyone and happy coding.