Introducing the Practice2:36 with Guil Hernandez
See an overview of the grid you'll create.
[MUSIC] 0:00 Hey everyone, Guil here, it's time for more practice, 0:04 practice is a good thing because it helps make what you've learned stick. 0:07 It also helps you become a faster and better developer. 0:10 So, let's sharpen your grid skills by practicing building flexible CSS 0:13 grid layouts. 0:17 This practice session covers creating flexible column tracks 0:18 using grid features that adapt your content to available space and 0:22 intelligently size and position items within the grid container. 0:26 So, you're going to build this flexible and responsive card layout. 0:30 This session is a follow up to the second stage of my CSS Grid Layout course. 0:34 So if you haven't taken that yet, 0:38 I suggest you finish the course before moving forward. 0:40 I've also included a link for the course in the teacher's notes. 0:43 To get started, launch the workspace with this video. 0:46 I've included HTML and CSS files for this exercise, 0:49 an index.html contains six divs with the class card. 0:53 The file page.css contains the base styles for 0:58 the page, which you can view when you preview the workspace in the browser. 1:03 You're going to write your CSS inside the file layout.css. 1:08 So now, let's walk through what you'll need to do. 1:13 In layout.css, there are four comments with instructions on the CSS 1:16 selector styles you'll need to write. 1:20 So first, you'll determine which HTML element is the grid container, then 1:23 target it by replacing this placeholder selector with the grid container selector. 1:28 Then you'll need to write the declaration that turns on the grid in the browser. 1:34 Next, you are going to let the browser 1:39 automatically fit the column tracks inside the grid container. 1:41 So you'll need to use the grid functions and keywords that, together, 1:46 auto generate as many columns necessary to fit the available space 1:50 without causing the grid to overflow. 1:55 And here is a hint, each column should not get narrower than 1:57 280 pixels and if the available space allows it, 2:02 each column should expand to take up one fraction of the free space. 2:06 Finally, you'll apply a 20 pixel gutter to rows and columns. 2:10 So the goal is to get your grid layout to look like this. 2:15 As you can see, the layout automatically resizes from a three column layout 2:19 to two columns, then one column, all without media queries. 2:23 This exercise is a great way to practice what you've learned so far about CSS grid. 2:27 So good luck, have fun, and in the next video, I'll walk you through one solution. 2:32
You need to sign up for Treehouse in order to download course files.Sign up