13 Creating Page Layouts with Grid

This chapter covers

  • Understanding how CSS Grid Layout works
  • Learning how to work with Grid containers, rows, and columns
  • Working with Grid gutters, areas, and alignment
  • Building the holy grail layout with Grid

For what seems like centuries, web designers have been using unwieldy libraries such as Bootstrap to lay out page elements using one or more rows and one or more columns. This grid layout gave designers decent control over where each page element appeared. The cost, though, was high because grid layout libraries were often complex and almost always weighed down by too much extraneous CSS or even JavaScript code.

That’s changing fast as a new CSS technology called CSS Grid Layout (usually shortened to ...

Get Web Design Playground, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.