1
00:00:00,000 --> 00:00:04,520
[MUSIC]

2
00:00:04,520 --> 00:00:07,166
Hey everyone, Guil here,
it's time for more practice,

3
00:00:07,166 --> 00:00:10,920
practice is a good thing because it
helps make what you've learned stick.

4
00:00:10,920 --> 00:00:13,310
It also helps you become a faster and
better developer.

5
00:00:13,310 --> 00:00:17,130
So, let's sharpen your grid skills
by practicing building flexible CSS

6
00:00:17,130 --> 00:00:18,380
grid layouts.

7
00:00:18,380 --> 00:00:22,220
This practice session covers
creating flexible column tracks

8
00:00:22,220 --> 00:00:26,320
using grid features that adapt your
content to available space and

9
00:00:26,320 --> 00:00:30,040
intelligently size and
position items within the grid container.

10
00:00:30,040 --> 00:00:34,490
So, you're going to build this
flexible and responsive card layout.

11
00:00:34,490 --> 00:00:38,990
This session is a follow up to the second
stage of my CSS Grid Layout course.

12
00:00:38,990 --> 00:00:40,320
So if you haven't taken that yet,

13
00:00:40,320 --> 00:00:43,570
I suggest you finish the course
before moving forward.

14
00:00:43,570 --> 00:00:46,630
I've also included a link for
the course in the teacher's notes.

15
00:00:46,630 --> 00:00:49,340
To get started,
launch the workspace with this video.

16
00:00:49,340 --> 00:00:53,400
I've included HTML and
CSS files for this exercise,

17
00:00:53,400 --> 00:00:58,608
an index.html contains six
divs with the class card.

18
00:00:58,608 --> 00:01:03,840
The file page.css contains
the base styles for

19
00:01:03,840 --> 00:01:08,110
the page, which you can view when you
preview the workspace in the browser.

20
00:01:08,110 --> 00:01:13,780
You're going to write your CSS
inside the file layout.css.

21
00:01:13,780 --> 00:01:16,130
So now,
let's walk through what you'll need to do.

22
00:01:16,130 --> 00:01:20,830
In layout.css, there are four
comments with instructions on the CSS

23
00:01:20,830 --> 00:01:23,060
selector styles you'll need to write.

24
00:01:23,060 --> 00:01:28,660
So first, you'll determine which HTML
element is the grid container, then

25
00:01:28,660 --> 00:01:34,600
target it by replacing this placeholder
selector with the grid container selector.

26
00:01:34,600 --> 00:01:39,450
Then you'll need to write the declaration
that turns on the grid in the browser.

27
00:01:39,450 --> 00:01:41,940
Next, you are going to let the browser

28
00:01:41,940 --> 00:01:46,040
automatically fit the column
tracks inside the grid container.

29
00:01:46,040 --> 00:01:50,212
So you'll need to use the grid
functions and keywords that, together,

30
00:01:50,212 --> 00:01:55,470
auto generate as many columns
necessary to fit the available space

31
00:01:55,470 --> 00:01:57,870
without causing the grid to overflow.

32
00:01:57,870 --> 00:02:02,680
And here is a hint,
each column should not get narrower than

33
00:02:02,680 --> 00:02:06,130
280 pixels and
if the available space allows it,

34
00:02:06,130 --> 00:02:10,100
each column should expand to take
up one fraction of the free space.

35
00:02:10,100 --> 00:02:15,440
Finally, you'll apply a 20 pixel
gutter to rows and columns.

36
00:02:15,440 --> 00:02:19,290
So the goal is to get your
grid layout to look like this.

37
00:02:19,290 --> 00:02:23,930
As you can see, the layout automatically
resizes from a three column layout

38
00:02:23,930 --> 00:02:27,610
to two columns, then one column,
all without media queries.

39
00:02:27,610 --> 00:02:32,040
This exercise is a great way to practice
what you've learned so far about CSS grid.

40
00:02:32,040 --> 00:02:35,880
So good luck, have fun, and in the next
video, I'll walk you through one solution.