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 CSS Grid or just Grid) comes online. Supported now by the current and recent versions of all the major browsers, CSS Grid is the standards-friendly and no-library-required way to implement a grid layout on your pages. This chapter introduces you to the basics of CSS Grid. You learn what Grid is, what it can do, and how it works.
Understanding CSS Grid Layout
In Chapter 12, you learned that Flexbox enables you to break out of the browser’s default object flow by creating flexible containers that give you exquisite control to arrange items either horizontally or vertically. Wouldn’t it be great if there was some way to create a container that gave you pinpoint control over your page objects both horizontally and vertically?