#019: Building a Simple Grid

(Updated on )

The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren’t grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They’re easy. We’ll set a simple one up in just a few minutes. The concepts at work here insprired the article “Don’t Overthink It Grids.”

Of course, we run into a few problems along the way (as you do). In this case, we used an attribute selector that didn’t match like we wanted it to.

We also set up a “toolbox” CSS file that will contain classes that are generic, reusable, and kind of globally useful. The first one, as ever, is the Clearfix – a bit of CSS we can use on parent elements that we don’t want collapsing because of their floated children. We don’t load up this toolbox CSS as a separate file, we @import it into the global.

We get the grid working, but we still have work to do in getting the modules sitting in there correctly and gutters set up.