From the course: CSS: Advanced Layouts with Grid

Unlock this course with a free trial

Join today to access over 25,000 courses taught by industry experts.

Define the main grid

Define the main grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

Define the main grid

“

- [Instructor] Our first mission is to create the overall grid layout that we'll use to place each of these cards. To make it a little easier to visualize here in the browser, I'll use the inspector to show what we want. This div with a class of cards, that's what will hold each of these individual cards. And this will be my main grid. So I'll go ahead and create a new rule for that and just say display grid. I also note that I want three equal width columns on desktop, so I'll go ahead and say grid-template-columns. We'll say repeat three columns at 1fr each. And let's go over to this layout tab and turn on the overlay for this grid we just created. There, now, this is a little bit easier to visualize. So what I'm going for is a three-column layout for a desktop view where this first card takes up the first two columns and the second card takes up the next two columns and the row beneath it. And then this third card takes up the third column, but spans the first row and into a second…

Contents