Defining a Grid

Now that you know the basic concepts and terminology behind CSS Grid Layout, 0:00 you're ready to learn the first steps in creating a grid, 0:04 defining the grid container and setting up columns and rows. 0:06 In this video, I'll introduce you to the grid display value and 0:10 two grid related properties, grid-template-columns 0:13 to define the columns, and grid-template-rows to define the rows. 0:17 To follow along, launch the workspace for this video or 0:21 download the project files to use your preferred text editor. 0:24 In the index.html file, there is a reparative with the class grid, 0:27 and nested inside are three divs with a class item. 0:32 Over in the CSS folder, there are two style sheets, page.css and grid.css. 0:37 Page.css simply contains the base styles for the page. 0:42 You can see the base styles once you preview your workspace in the browser. 0:46 We're going to write our grid layout styles here inside grid.css. 0:50 CSS grid layout starts with a grid container. 0:55 A grid container is defined by setting an element's display property to grid. 0:58 So, the div, with the class grid is going to be our grid container. 1:02 And not only in the class grid, but 1:08 you can turn any CSS selector into a grid container. 1:09 So, over in grid.css, we'll create a new rule that targets grid, 1:12 and let's start by giving it a max-width of 800 pixels, 1:18 then set its display value to grid. 1:23 Setting display to grid turns on the grid in the browser. 1:29 So now, all direct children of grid, 1:33 the item divs, automatically become grid items. 1:36 Now in the browser, 1:40 aside from the width we set, you won't see any visible changes yet. 1:41 That's because by default, 1:45 the grid container places its grid items in a single column. 1:47 So now we're going to place the grid items into multiple columns and rows. 1:50 In CSS grid layout, columns and rows or 1:54 the space between two adjacent grid lines are referred to as grid tracks. 1:57 You use the grid-template-columns property to set the column tracks, and 2:02 grid-template-rows to set the row tracks. 2:07 Both properties specify the size of each grid track. 2:10 You declare these properties on the grid container. 2:13 You see, 2:16 the grid container CSS rule is like your grid layout configuration rule because 2:16 you're able to manage most of what happens in your grid from just this one rule. 2:21 So let's first create column tracks by adding grid-template-columns inside 2:26 the grid rule. 2:30 And the value for 2:34 this property is a space-separated list of values known as a track list. 2:35 Each value in the track list specifies the size of a column, and 2:40 there are several ways to define these track values. 2:44 The most straightforward is using CSS length units like pixels. 2:47 I'll show you some of those in this video, but 2:50 there are more advanced methods like flexible length units and 2:52 sizing functions, which you'll learn in the next part of this course. 2:55 So to layout each of the three items inside the grid container div, 2:59 we'll need to define three column tracks. 3:03 I'll start by setting each column track value to 200 pixels. 3:06 The three grid tracks setup three equal sized columns. 3:12 It displays the items side by side, each 200 pixels wide. 3:17 And changing a value will change the size of its corresponding column track. 3:21 For example, setting the first value to 320 pixels makes the first column wider. 3:24 You can also use percentages to set a column's width relative to the width of 3:32 the grid container. 3:37 So for example, the third column is now 20% wide. 3:38 And you can use M and RAM values, even the CSS calc function in your track list. 3:43 So feel free to pause the video and 3:49 experiment with different track size values on your own. 3:50 But I'll go ahead and set the track list back to 200 pixels for all 3. 3:53 So now notice how there's all this extra space after the last column. 4:00 Well, that's because we've set three fixed width columns and 4:04 their combined widths do not take up the full width of the grid container. 4:08 Well, when you set any of the column tracks value to auto, for example, 4:13 the middle column, it will expand the column to fill up the extra space. 4:19 So the middle column is now flexible while the first and last columns are fixed. 4:23 Now this is just one of the ways you're able to create flexible grid columns. 4:29 And you'll learn more advanced methods using flexible length units and 4:33 sizing functions in the next stage. 4:36