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

    • Rack-l

    ...

    The Rack lets you create an element with a min-height value. You can use it to vertically center one of its child.

    To define which element will be centered you just have to add the centered attribute (without value) to this element.

    You can define a gap value that will be applied between non centered elements.

    • centered : an attribute you give to one of the children, it define which element will be centered.
    • gap : defines the space between non centered elements.
    • min-height : the minimum height of the Rack element.
    • max-height : the maximum height of the Rack element.
    • height : the height of the Rack element.

    Examples:

    The simplest use of the Rack is to set a min-height and only add one centered child.

    element 1

    In this exemple, you can see how the other elements are displayed around the centered element.

    element 1

    element 2

    element 3

    element 4

    element 5

    When using the max-height or the height attribute, the rack will become scrollable if it's content overflows.

    element 1

    element 2

    element 3

    element 4

    element 5