Add stack utilities in favour of outer-grid

[robdekort]

The problem
The current outer grid holding page builder blocks is very easy to grasp, but it has a few limitations. Gaps between rows are always the same and you need negative margins to remove gaps.

A solution
Using utilities similar to space-y-* but with a few superpowers.

<main class="stack-16">
  <section></section>
  <section class="no-space-y">No space above section and above next sibling section</section>
  <section></section>
  <section class="stack-space-8">Less space above this section</section>
</main>

Compiles to:

.stack-16 {
    --stack-space: 4rem;
}
.stack-16 > *:not(.no-space-y, .no-space-b) + *:not(.no-space-y, .no-space-t) {
    margin-block-start: var(--stack-space, 4rem);
}
.stack-space-8 {
    --stack-space: 2rem;
}

You can also use no-space-t or no-space-b to alter the spacing. Arbitrary values and modifiers like stack-[5px] md:stack-16 are also supported.

Inspired by the various stack/flow/owl techniques from smart others.

[klickreflex]

After taking a couple of minutes to understand it fully, I absolutely love it!

[marcorieser]

[sjclark]

My inuition is that this is a good idea - but could you reference any of the "Inspired by the various stack/flow/owl techniques from smart others" @robdekort, because I'm a silly dumb person who wants to understand this a bit more 😂

[robdekort]

My inuition is that this is a good idea - but could you reference any of the "Inspired by the various stack/flow/owl techniques from smart others" @robdekort, because I'm a silly dumb person who wants to understand this a bit more 😂

I guess the original source is this: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ and it was expanded on here: https://every-layout.dev/layouts/stack/.

I based my proposal on the Tailwind space-y utilities. The option to clear the next sibling top spacing I haven't seen before.