From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

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

Create the main grid

Create the main grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Create the main grid

“

- [Narrator] Now we're ready to set up the grid. Just like in any other web design, we're going to start mobile first and scale the viewport up, and then find out where the natural break points are for our grid. To do that I'll go into the developer tools and preview my site using the responsive design mode. And here you can see on small screens, everything looks fine, it's a nice, single column layout. And as I start widening the viewport, we get to a natural point where the content starts looking weird if it continues to widen, so it's restricted, and that point is around 900 pixels or 50 ems. This is also the natural breakpoint for when we want to introduce columns, however this is an intermediate breakpoint, so for a screen that's about this width, so 50 ems or thereabout, I don't want to have a three column layout, I want to have a two column layout. So I'll put a column here on the left-hand side and then put all the main content on the right-hand side and then as we keep…

Contents