Creating flow

As part of our CSS Reset, we removed the margin from most of our elements.

Some people prefer not to do this, and only remove it when they need to, but most people do prefer removing it and adding it back in.

One reason that it's useful to remove is a lot of spacing these days is handled with gap.

There is an issue, with gap, however, which is that it creates consistent spacing.

That might sound like a good thing (and it can be!), but for the flow of text, it's not ideal.

Adding flow back into our site

There are a few different approaches to this that are all fairly similar.

Tailwind uses a .prose class on a parent, which then re-introduces margin-top and margin-bottom to all of the descendants of that element.

Heydon Pickering's Lobotomized Owl is another option, with a .flow class on the parent, though it only adds margin to the top of each direct descendant, other than the first one.

I'm quite partial to that approach, which looks like this:

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

Grid flow

While actual flow can be useful when we're dealing with text, a lot of modern components need consistent spacing instead.

One option could be to use .flow, and change the --flow-space to use either rem or px.

Personally, I prefer to simply use gap instead in these situations though, so I use this instead:

.grid-flow {
  display: grid;
  gap: var(--grid-flow-space, 1rem);

  align-content: start;
  justify-items: start;

  /* optional */
  align-content: var(--grid-flow-alignment, start);
  justify-items: var(--grid-flow-justification, start);
}