From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Exercise: Build a layout with Grid

Exercise: Build a layout with Grid - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Exercise: Build a layout with Grid

“

- [Instructor] Before we start building our grid layout, let's update the CSS file path to grid.CSS. Now we're ready. In the last lesson in our code pen example we created a basic page layout using grid column and grid row. We're going to do the same thing here, but this time let's make a 12 column grid system to layout the page components. The first thing we'll do is set up the dimensions. Let's head over to the grid.CSS file. First, we'll add display grid to define the grid container. We'll add that here to this container selector. Then, we'll use grid template columns with the repeat notation. Grid-template-columns and let's add in that repeat notation with the parentheses and with the semicolon. So now let's set the first value to 12 for 12 columns, followed by a comma. For the size value will use the minmax function. I'd like to add in the functions first before I add in the values just to make sure I have…

Contents