ComboStrap UI - Grid (Row and Cell)

Table of Contents

About

The grid component permits to create a grid layout based on cells inside a row.

It will layout the cells uniformly on the horizontal axis.

If a cell does not pass horizontally, it goes to a new line in a centered position.

A grid layout makes also all cells readable from the start from a mobile device.

Example

A uniform 3 cells grid

<row>
    <cell>
        <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. 
    </cell>
    <cell>
        <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. 
    </cell>
        <cell>
        <icon name="bs:inboxes-fill" width="3rem"/>
        == Lorem Ipsum 3 ==
        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. 
    </cell>
</row>
  • Output:

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.

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.

Lorem Ipsum 3

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.

The dimension of the the cells are not uniform, this is why a background should never be used inside a grid.

Syntax

<row type>
   <cell></cell>
   <cell></cell>
</row>

where:

  • type may be the value:
Type Description Default for
auto each cell width will automatically calculated to be greater than the minimum width of 300 loss grid
fit each cell will takes their natural width . Note that for cells with text and without width, we set a width of 300 (because the natural width of text is the whole line until the end of the paragraph) contained grid
none the content will just shrink without overflow

You can use all styling attributes.

Powered by ComboStrap