Stub out a .quick-grid helper class

[mdo]

Idea is to enable super fast grid layouts. We could maybe back in some gap and row behavior—maybe providing a --rows like --columns?—to allow random layouts on the fly.

Edit: Definitely not going to include a --rows since it would defeat the original purpose of creating a vertical stack of elements.

Inspired by #32034.

/cc @twbs/css-review

---

Potential todos

• Rename to something else?
• Replace block button docs with this instead?

[thewebartisan7]

I don't use css grid yet, but only flexbox, and I think also most of others.
And most of my current design that use the stack helper is added on a flexbox element.

So I am unsure of using css grid only for add space.

The goal of this utility is not to add a grid, but space.

So maybe would be better another approuch that can be used in any type of stack.

"quick-grid" is not really appropriate name I think.

[mdo]

Yeah I was debating naming this "stacks", but that implies z-index more than layout. Open to other ideas!

[thewebartisan7]

I see what you mean with "stacks" (example https://css-tricks.com/how-to-stack-elements-in-css/), but that is better than "grid" which implies a grid layout.

Personally I like more your first example with flexbox and margin, named vstack/hstack, here https://codepen.io/emdeoh/pen/Bazxbrq

This should just replace margin utilities, so if you don't like stacks, consider word spacers, spacing, space...

[thewebartisan7]

Definitely not going to include a --rows since it would defeat the original purpose of creating a vertical stack of elements.

Not sure which original purpose you mean, but in all example mentioned here #32034, plyon included, the idea behind is to create both vertical and horizontal spacing.

[mdo]

Replaced by #33986.