2nd Edition: Please Mind The Gap

We at Every Layout (try to imagine we have some sort of corporate identity rather than being two blokes with a neat website and a script that generates epubs) are proud to announce the release of our second edition!

And we are slashing the already low price of $69 down to just $40 to mark the occasion. Just make sure you use 2ND_COMING at checkout ASAP; we can’t keep it at that price forever.

What’s new, then?

This edition is all about the gap property, which is now supported with Flexbox in all modern browsers.

Why is gap important? Smart layout primitives like the Cluster, Sidebar, and Switcher are all designed to automatically reconfigure themselves to suit different contexts—and without needing JavaScript or @media queries.

When doing this, gutters (margins) between elements can be problematic unless handled carefully. A margin applied to one element to create a gap between it and an adjacent element becomes a misplaced margin when the element wraps:

Until now, we have solved this by applying margin to child elements symmetrically (to all sides) and using negative margin to deal with the excess.

There’s nothing wrong with using negative margins per se; it’s more a technique than a hack. But this approach does necessitate what we have come to call an intermediary wrapper…

<div class="component">
  <div> <!-- ← intermediary wrapper with negative margin -->
    <div>Child 1</div>
    <div>Child 2</div>
  </div>
</div>

What this does is insulate the negative margin from the flow of the document. Then we can apply a sensible margin to the outer component itself. In fact, it’s more likely this margin would be applied by a parent Stack element, which injects margin between successive elements (Every Layout components are highly modular and composable).

Not only does the negative margin technique represent additional markup, but things start to go awry when it comes to custom properties and nesting.

Margins are applied to child elements and child elements become parent elements when nesting. In the following example, 0.5em applies to the nested component’s children as intended, but also overrides the 1em value that should be applied to itself. This isn’t what we want.

<div class="component" style="--margin: 1em">
  <div>
    <div class="component" style="--margin: 0.5em">
      <div>
        <div>Grandchild 1</div>
        <div>Grandchild 2</div>
      </div>
    </div>
    <div>Child</div>
  </div>
</div>

The gap property, on the other hand, is defined on the parent but applied between the children. This difference is critical: there are no longer competing values for the same elements.

<div class="component" style="--gap: 1em">
  <div class="component" style="--gap: 0.5em">
    <div>Grandchild 1</div>
    <!-- 0.5em gap -->
    <div>Grandchild 2</div>
  </div>
  <!-- 1em gap -->
  <div>Child</div>
</div>

There are plenty of resources out there that will tell you what gap is and how to apply it. In Every Layout, we explain the wider implications of these properties in relation to responsive and systematic design and help you weigh up alternatives. Not everything should use gap just because it now exists.

Thanks for reading and for all the support!

IMO this entire industry is sleeping on Every Layout. The primitives and education it provides render so many tools and elaborate bolt-on workarounds unnecessary.*

* as read on Twitter

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.