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

2
00:00:04,264 --> 00:00:07,710
Hi everyone Guil here,
it's time for some practice.

3
00:00:07,710 --> 00:00:08,940
Practice is a good thing.

4
00:00:08,940 --> 00:00:11,820
It helps make what you've
learned stick and last longer.

5
00:00:11,820 --> 00:00:14,650
But also helps you become a faster and
better developer.

6
00:00:14,650 --> 00:00:17,480
CSS grid layout can be
challenging at times, so

7
00:00:17,480 --> 00:00:21,190
let's practice the basics of CSS grid
to make sure your knowledge sticks.

8
00:00:21,190 --> 00:00:25,940
This practice session covers creating
rows, columns and gutters with Grid.

9
00:00:25,940 --> 00:00:29,670
It's a great follow up to the first
stage of my CSS Grid Layout course.

10
00:00:29,670 --> 00:00:33,990
So if you haven't taken that yet, and find
this practice session too difficult or

11
00:00:33,990 --> 00:00:36,630
realize that none of the Grid
concepts sound familiar,

12
00:00:36,630 --> 00:00:38,190
than take this course first.

13
00:00:38,190 --> 00:00:41,080
I've posted the link in
the teacher's notes of this video.

14
00:00:41,080 --> 00:00:44,220
To get started launch
the workspace with this video.

15
00:00:44,220 --> 00:00:48,100
I've included HTML and
CSS files for this exercise.

16
00:00:48,100 --> 00:00:52,980
One of the style sheets linked to the HTML
page.CSS already includes the base

17
00:00:52,980 --> 00:00:58,560
styles for the page which you can see when
you preview index.html in the browser.

18
00:00:58,560 --> 00:01:00,300
Now let's walk through
what you'll need to do.

19
00:01:01,720 --> 00:01:05,550
In the file grid.css, you'll see

20
00:01:05,550 --> 00:01:10,300
five comments with instructions on the CSS
selector and styles you'll need to write.

21
00:01:10,300 --> 00:01:16,530
So first, you'll need to determine which
HTML element is the grid container, then

22
00:01:16,530 --> 00:01:22,430
target it by replacing this placeholder
selector with the grid container selector.

23
00:01:22,430 --> 00:01:24,440
Then in the grid container rule,

24
00:01:24,440 --> 00:01:29,070
you'll need to write the declaration
that turns on the grid in the browser.

25
00:01:29,070 --> 00:01:32,825
Once you've established
the grid formatting context,

26
00:01:32,825 --> 00:01:39,550
you will declare three row tracks in the
following order, 100px, 400px and 200px.

27
00:01:39,550 --> 00:01:42,650
Then you'll declare
three column tracks and

28
00:01:42,650 --> 00:01:46,260
make sure they're each 320 pixels wide.

29
00:01:46,260 --> 00:01:51,940
Finally, you'll create separation
between the columns and rows by applying

30
00:01:51,940 --> 00:01:57,220
a 20 pixel gutter to rows, and
a 15 pixel gutter to columns.

31
00:01:57,220 --> 00:02:00,890
The goal is to get your
layout to look like this.

32
00:02:00,890 --> 00:02:05,790
This exercise is a great way to practice
what you've learned so far about CSS Grid.

33
00:02:05,790 --> 00:02:06,950
So, good luck, have fun.

34
00:02:06,950 --> 00:02:09,490
And in the next video,
I'll walk you through the solution.