Stack

Stacks allow to group horizontally or vertically a set of nodes. Note that the elements will keep their size. In other words, this is not a flexbox, but a grid.

To create an stack, use the following code:

<div class="GenshiStack">
  <div>Node</div>
  <div>Node</div>
  <div>Node</div>
  <div>Node</div>
</div>

The stack will wrap nicely if the screen isn’t large enough for the items. If you have special needs, make sure that you aren’t using a stack where you should be actually using a col, which doesn’t have this behaviour.

Change the size of the window to test the behaviour in the following example:

Stack positioning

You can further control the positioning of the stack by pushing the elements to the end of the view, using the GenshiStack--end modifier:

Or center the elements evenly with GenshiStack--center:

Or just place space between the elements with GenshiStack--between:

Stack direction

By default, the stack is horizontal: items are placed horizontally. You can change this with the additional modifiers:

To make a vertical stack, use GenshiButton--v (v stands for vertical).
To make an horizontal stack with reverse order, use GenshiButton--hr.
To make a vertical stack with reverse order, use GenshiButton--vr.

Gap size

Use an additional modifier to configure the size of the gap:

Gap-less (no gap): GenshiStack--gapless
Compact (0.5rem): GenshiStack--compact
Cozy (1.5rem): GenshiStack--cozy