The Rack

<rack-l layout="min-height:300px gap:1">
  <div layout="centered">...</div>
</rack-l>

The rack allows you to create an element where you control the height (via height, min-height or max-height), it can be used to vertically center one of its children in the available space.

To specify which child element will be centered, simply add the centered attribute (without a value) to that element.

You can also define a gap value, which will be applied between the non-centered elements.

When to use ?

• You need an element where you can control the height.
• You need to vertically center an element inside of it.

Attributes

• centered : an attribute you give to ⚠️ one of the children (not the rack itself) ⚠️, it define which element will be centered.
• min-height : the min-height of the rack.
• max-height : the max-height of the rack.
• height: the height of the rack element.
• gap : defines the space between non centered elements.

Basic Usage

The simplest use of the rack is to set a min-height on it.

gap

To vertically space elements in the rack, you can use the gap attribute.

centered

To vertically center an element inside the rack, simply add the centered layout class to it.

This will allocate the available vertical space to the element and center it within that space.

In this example, there is only one element inside the rack, so it is perfectly centered.

In this example, there are multiple elements inside the rack, so the centered element is vertically centered within the available vertical space.

max-height, height

You can make the rack scrollable by setting the height or max-height attribute, and if the content overflows, it will become scrollable.