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.

Create the main grid

Create the main grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

Create the main grid

“

- [Instructor] All right, we're ready to create our grid. As we would with any other web layout, we'll start mobile first, and then scale the viewport up to find out where the natural breakpoints are for our grid. So to do that, I will open up my developer tools, and right now, we're previewing this in our responsive design mode. So here on this small screen, all of this looks just fine as a single column layout, but as I make the viewport wider, we do get to a natural point where there's enough screen space available that this content would look better and be more readable with columns. So here we are at 820 pixels. Let's go down and say about 800. This is sort of an intermediate width. So at this point, I just want to introduce a second column. There's not quite enough room for a third column. So let's head to our code. I'm in the chapter three folder, and then in the O3_O3b folder, I'll open up this style sheet. And then I'm going to start by writing a media query on this site…

Contents