The Solution3:26 with Guil Hernandez
Follow along to see how to lay out the web page using CSS Grid layout.
Hey, there, how'd it go? 0:00 Were you able to write most or all of the grid selectors properties and values for 0:01 this practice session? 0:04 If not no worries, you can watch my solution, compare it to what you wrote, 0:06 and then try to recreate it yourself. 0:09 The goal was to create a flexible and 0:11 responsive grid layout that looks like this. 0:13 Now I'll show you how I created it. 0:16 You can also reference this code when you download the project files. 0:18 First I'll determine which HTML element is the grid container. 0:21 Looking at index.html I see that the div 0:25 with the class main-content wraps all the card divs I want to lay out with grid. 0:29 So in the layout.css I'll replace the placeholder 0:34 selector with the class main-content. 0:39 Then to turn on the grid in the browser, 0:43 I'll set main-contents display value to grid. 0:46 Now the most challenging part of this exercise is generating the columns 0:52 automatically. 0:57 So I'll start by adding the grid-template columns property. 0:59 Then, to automatically fit column tracks inside the grid container, 1:06 I'll first use the repeat function. 1:11 Which is a shortcut for setting repeating patterns of tracks. 1:13 As the repetition value, I'll pass it the keyword, auto-fit. 1:17 Which, as you learned in the CSS Grid course, 1:22 instructs the browser to generate as many columns as necessary to fit the available 1:25 space without causing the grid to overflow. 1:29 Auto-fit also collapses any empty tracks down to zero pixels. 1:32 That way, grid items can expand to take up the remaining space. 1:36 Now as a hint, I mentioned that each column 1:40 should not get narrower than 280 pixels and if the available space allows it, 1:44 each column should expand to take up 1 fraction of the available space. 1:49 So grid provides the minmax function to do just that. 1:53 Create fluid tracks that expand to fill the free space, 1:57 while not getting any narrower than a specified minimum size. 2:01 So I'll pass minmax as the track size value to repeat. 2:05 I'll set the min size to 280 pixels, 2:11 then use grid's flexible FR, or fraction unit, to set the max size. 2:15 I'll set it to 1fr, which means 1 fraction of the available space. 2:21 So this is going to fit as many 280 pixel wide columns 2:26 as can fit into the grid container without overflowing its boundaries. 2:31 And if the available space allows it the columns can expand 2:34 to fill up a fraction of the available space. 2:38 Finally, to apply a 20 pixel gutter between rows and 2:42 columns I'll use the grid-gap shorthand property and set it to 20 pixels. 2:47 I'll give it a save and test it in the browser. 2:56 So as you can see, the cards automatically resize and 3:01 shift from a three column layout to two columns then one column, good. 3:05 So I hope you were able to complete this grid practice session successfully. 3:10 If not, why not start over and try to write the grid properties and 3:14 values, without looking at my version. 3:17 I'm also going to teach you more about grid layout in the last stage of my CSS 3:20 grid course. 3:23 So I'll see you soon and happy coding. 3:24
You need to sign up for Treehouse in order to download course files.Sign up