The Grid: The Cornerstone of a Web Design

I don’t know about you, but looking at a complex layout like the one we’re going to build gives me a bit of anxiety. It’s not just that CSS can be difficult to use, but it’s also not immediately clear how to wrangle all the parts of this design.

Like functional decomposition in programming, a grid is how we can decompose a user interface into smaller parts. We can focus on each part of our design, and rely on the grid to keep everything looking visually cohesive.

A grid is more or less what it sounds like—a means of aligning elements along a fixed horizontal and/or vertical axis. You might not have realized it, but you’ve been using a grid already. By just using Bootstrap’s default styles and form ...

Get Rails, Angular, Postgres, and Bootstrap 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.