December 2020

One place I often get hung up starting a new project is on how to build the layout. I can spend hours aimlessly browsing through all the latest CSS frameworks, trying to make sense of the varying systems they use. Or I’ll spend a bunch of time trying to decide whether to use flexbox or grid for a particular div. Before I know it my morning is gone, and all I have is an empty HTML page.

All I’m trying to do is arrange some rectangles! Why is it so complicated? I noticed many layout systems were getting rid of fancy terminology completely, instead opting for just rows and columns like elm-ui, or simply stacks like Apple UIKit. I liked this approach, but still didn’t want to commit to a new framework just so I could arrange rectangles a bit easier.

Boiling it all down, I created four CSS classes that provide a small abstraction over flexbox:

.row { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; }

.compact { flex-grow: 0; flex-shrink: 0; flex-basis: auto; }
.expand { flex-grow: 1; flex-shrink: 1; flex-basis: 0; }

These classes can be used to create just about any layout imaginable. Occasionally, I’ll sprinkle in extra styles like justify-content: center, flex-wrap: wrap, or flex-grow: 4 to make small tweaks, but these are rarely needed and easy to remember or lookup.

Check out this Codepen for a bunch of examples:

See the Pen Four Line Layout by Chip Jackson (@chipjacks) on CodePen.

The beauty of this approach is its size and simplicity. Is this a row or a column? Should it expand or stay compact? These are questions a kindergartener could answer without needing to read a bunch of docs or import another dependency.