Why I Stopped Minding The Gap

The Problem

The gap utility is great, but it can be frustrating when you want different spacing between certain elements. For example, how can we add more space between the title “And so it begins” and the description “Goddamn this …”?

1. Margins

One way to handle it is by setting a margin on the description. A positive margin increases the gap, a negative one shrinks it.

1
<div class="... grid gap-2">
2
  <div class="...">
3
    <p>And so it begins</p>
4
    <p>25 March 2024</p>
5
  </div>
6
  <div>class="mt-2 ..."> Goddamn this ...</div>
7
</div>

But what if we removed the title and date? Suddenly, there’s more space (the red box below) between the top most tag (LN-001) and the description than we want.

So now we have to tweak our styles again—probably with a more specific rule. And this time, we’d need to make it conditional on the date not being there. For example:

1
const showDescription: boolean;
2

3
<div class="grid gap-2 ...">
4
  ...
5
  <div class={`... ${showDescription ? "mt-2" : ""}`}>
6
    Goddamn this ...
7
  </div>
8
</div>

I’m sure there’s a pure CSS way to solve this using :has or something similar, but I need a solution that works within TailwindCSS. The downside with this approach is how much HTML and CSS we’ve had to tweak just to control the gap for the description element.

2. Another Gap Between Nested Elements

Another option is to wrap the title, date, and description in a new container. Then we can apply a specific gap to that container, effectively overriding the original spacing by scoping it differently and setting the gap we actually want.

1
<div class="... grid gap-2">
2
  <div class="grid gap-1">
3
    <div class="...">
4
      <p>And so it begins</p>
5
      <p>25 March 2024</p>
6
    </div>
7
    <div>class="mt-2 ..."> Goddamn this ...</div>
8
  </div>
9
</div>

The obvious downside is that we’ve had to change the HTML just to get the spacing right. And in this case, we also need to make sure the grid styling stays consistent between the original parent grid (whose gap we’re overriding) and the new child grid we’ve added. It works—but it’s a bit of a tedious fix.

3. Don’t Use Gap. Use a Utility

Andy Bell came up with a flow utility that solves this problem perfectly. Instead of relying on gap, we can define our own utility that lets elements control the space between themselves. By using CSS variables and a custom utility class like flow, we keep the benefits of using gap for layout, while giving individual elements the power to control their own spacing.

The lobotomised owl applies the styles to all child elements where the utility is used.

1
.flow {
2
  --flow-space: 1rem;
3
}
4

5
.flow > * + * {
6
  margin-top: var(--flow-space);
7
}

1
<div class="flow ... grid">
2
  <div class="...">
3
    <p>And so it begins</p>
4
    <p>25 March 2024</p>
5
  </div>
6
  <div>class="[--flow-space:0.5rem] ..."> Goddamn this ...</div>
7
</div>

References

1. Ahmad Shadeed does a great job of advocating for this approach, proposing that is should be exposed as a “Self Gap” utility: https://ishadeed.com/article/self-gap/.
2. Andy Bell introduces the Flow utility: https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties/.