The Box

<box-l layout="max-width:1000px grow">...</box-l>

The box component is a simple wrapper for anything.

When to use ?

• You want to create a container never wider than a specific value
• You want that child elements takes full width

Attributes

• max-width : the ideal width if possible.
• grow : sets the content of the box to take up 100% of the available width.

Basic Usage

In this example, we didn’t gave a max-width to the box so the box width is based on its content.

Not really usefull but you can see the box default behavior.

max-width

When you set a max-width on an element, the element will try to take up that width if there is enough space available.

However, if there isn’t enough space, the element will adjust and use the maximum available space instead.

grow

When you set the grow attribute on the box, its content will expand to fill its full width.

This allows you to give specific width to inline elements like buttons, span, etc.

In the same example if you dont set grow on the box, the box will take the width of its content like this :