LayoutCSS Docs Showcase
  • Showcase

    • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher

    • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index

    • Stack-l

    ...

    The stack allows to vertically space elements. You don't need to set a margin directly to an element anymore. Instead, just create a stack with a gap parameter to space elements inside.

    It space elements from each other, so the first and the last elements touch the border of the stack.

    • gap : the space value between elements.
    • recursive : whether the gap apply recursively (regardless of nesting level).

    Examples:

    Here we just set a gap value on the stack, as you can see the first and last elements touch the top/bottom of the stack because the gap only space elements from each other.

    1

    2

    3

    4

    If you set the `recursive` attribute all elements (children and grand children) will be spaced equaly.

    a

    b

    c

    2