Chapter 3
Laying Out a Page with CSS Grid
IN THIS CHAPTER
Getting acquainted with CSS Grid
Setting up a grid container
Carving up the grid into rows and columns
Creating grid gaps
Aligning grid items
If you haven’t learned CSS Grid yet (and you are a person who writes CSS), you are seriously missing out.
— JEN SIMMONS
Perhaps I’m dating myself, but back when I started crafting web pages, the exciting new technique for laying out a page was to create a giant table element and slot the various parts of the page into one or more table cells. This enabled us to line up our content like bootcamp recruits, which was great, but our pages looked as rigid and uninviting as a bootcamp sergeant, which wasn't so great.
Ever since then, web developers have dreamed of a CSS solution that would give us control over layout but still allow for some flexibility and creativity. That goal was partially realized a while back with Flexbox (check out Book 5, Chapter 2), which made it a breeze to lay out ...
Get HTML, CSS, & JavaScript All-in-One For Dummies 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.
