From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

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

Start your layouts with pen and paper

Start your layouts with pen and paper - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Start your layouts with pen and paper

- [Instructor] When I started working with CSS Grid, I quickly realized my previous experience working with web layouts was blocking my ability to make full use of this new layout module. To get around this problem, I went back to basics, and started working with grid layout on paper. And it turned out this is a great way to formalize your thinking around what grids are needed, and how they are formed. Because CSS Grid works from the outside in, you have to define your grids before you place items in them. That means you have to have a rough idea of what the grids should look like before you start writing your CSS. So here's what I do. First, I make some general drafts about how I want my layouts to appear across different screen widths, starting with the smallest screen and moving up. I'm not targeting specific screen widths at this point, just figuring out how the layout changes as more space is made available. Next, I draw grid lines over my layout to see how my contents are…

Contents