How to split the horizontal space in two with the grid component ?

About

This howto shows you how to split the horizontal space in two with the grid component.

The grid component splits the horizontal space across its children.

By default, it will do it across:

• 4 children in a large screen (lg)
• 3 children in a medium screen (md)
• 2 children in a small screen (sm)
• 1 children in a mobile screen (xs)

Using two children box, the grid will split the horizontal space:

• in two contingent box from a small screen and above
• in two stacked box for a mobile screen

Example:

<grid>
        <box>
            <icon name="bs:inboxes-fill" width="3rem"/>
            == Lorem Ipsum 1 ==
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </box>   
        <box>
            <icon name="bs:inboxes-fill" width="3rem"/>
            == Lorem Ipsum 2 ==
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
         </box>  
</grid>

• Output: