1
00:00:00,250 --> 00:00:01,330
Hey, there, how'd it go?

2
00:00:01,330 --> 00:00:04,820
Were you able to write most or all of the
grid selectors properties and values for

3
00:00:04,820 --> 00:00:06,030
this practice session?

4
00:00:06,030 --> 00:00:09,090
If not no worries, you can watch my
solution, compare it to what you wrote,

5
00:00:09,090 --> 00:00:11,020
and then try to recreate it yourself.

6
00:00:11,020 --> 00:00:13,120
The goal was to create a flexible and

7
00:00:13,120 --> 00:00:16,090
responsive grid layout
that looks like this.

8
00:00:16,090 --> 00:00:18,100
Now I'll show you how I created it.

9
00:00:18,100 --> 00:00:20,759
You can also reference this code
when you download the project files.

10
00:00:21,780 --> 00:00:25,628
First I'll determine which HTML
element is the grid container.

11
00:00:25,628 --> 00:00:29,990
Looking at index.html I see that the div

12
00:00:29,990 --> 00:00:34,498
with the class main-content wraps all
the card divs I want to lay out with grid.

13
00:00:34,498 --> 00:00:39,667
So in the layout.css I'll
replace the placeholder

14
00:00:39,667 --> 00:00:43,810
selector with the class main-content.

15
00:00:43,810 --> 00:00:46,168
Then to turn on the grid in the browser,

16
00:00:46,168 --> 00:00:50,060
I'll set main-contents
display value to grid.

17
00:00:52,070 --> 00:00:57,030
Now the most challenging part of this
exercise is generating the columns

18
00:00:57,030 --> 00:00:57,710
automatically.

19
00:00:59,060 --> 00:01:01,586
So I'll start by adding
the grid-template columns property.

20
00:01:06,133 --> 00:01:11,144
Then, to automatically fit column
tracks inside the grid container,

21
00:01:11,144 --> 00:01:13,826
I'll first use the repeat function.

22
00:01:13,826 --> 00:01:17,428
Which is a shortcut for
setting repeating patterns of tracks.

23
00:01:17,428 --> 00:01:22,870
As the repetition value,
I'll pass it the keyword, auto-fit.

24
00:01:22,870 --> 00:01:25,520
Which, as you learned
in the CSS Grid course,

25
00:01:25,520 --> 00:01:29,550
instructs the browser to generate as many
columns as necessary to fit the available

26
00:01:29,550 --> 00:01:32,120
space without causing
the grid to overflow.

27
00:01:32,120 --> 00:01:36,670
Auto-fit also collapses any empty
tracks down to zero pixels.

28
00:01:36,670 --> 00:01:40,560
That way, grid items can expand
to take up the remaining space.

29
00:01:40,560 --> 00:01:44,130
Now as a hint,
I mentioned that each column

30
00:01:44,130 --> 00:01:49,380
should not get narrower than 280 pixels
and if the available space allows it,

31
00:01:49,380 --> 00:01:53,790
each column should expand to take up
1 fraction of the available space.

32
00:01:53,790 --> 00:01:57,740
So grid provides the minmax
function to do just that.

33
00:01:57,740 --> 00:02:01,450
Create fluid tracks that
expand to fill the free space,

34
00:02:01,450 --> 00:02:05,400
while not getting any narrower
than a specified minimum size.

35
00:02:05,400 --> 00:02:09,320
So I'll pass minmax as
the track size value to repeat.

36
00:02:11,410 --> 00:02:15,590
I'll set the min size to 280 pixels,

37
00:02:15,590 --> 00:02:21,380
then use grid's flexible FR, or
fraction unit, to set the max size.

38
00:02:21,380 --> 00:02:26,550
I'll set it to 1fr, which means 1
fraction of the available space.

39
00:02:26,550 --> 00:02:31,020
So this is going to fit as
many 280 pixel wide columns

40
00:02:31,020 --> 00:02:34,950
as can fit into the grid container
without overflowing its boundaries.

41
00:02:34,950 --> 00:02:38,450
And if the available space
allows it the columns can expand

42
00:02:38,450 --> 00:02:40,700
to fill up a fraction
of the available space.

43
00:02:42,470 --> 00:02:47,230
Finally, to apply a 20 pixel
gutter between rows and

44
00:02:47,230 --> 00:02:54,410
columns I'll use the grid-gap shorthand
property and set it to 20 pixels.

45
00:02:56,300 --> 00:02:58,532
I'll give it a save and
test it in the browser.

46
00:03:01,533 --> 00:03:05,449
So as you can see,
the cards automatically resize and

47
00:03:05,449 --> 00:03:10,690
shift from a three column layout to
two columns then one column, good.

48
00:03:10,690 --> 00:03:14,650
So I hope you were able to complete
this grid practice session successfully.

49
00:03:14,650 --> 00:03:17,610
If not, why not start over and
try to write the grid properties and

50
00:03:17,610 --> 00:03:20,000
values, without looking at my version.

51
00:03:20,000 --> 00:03:23,810
I'm also going to teach you more about
grid layout in the last stage of my CSS

52
00:03:23,810 --> 00:03:24,610
grid course.

53
00:03:24,610 --> 00:03:26,490
So I'll see you soon and happy coding.