ComboStrap UI - Grid (Row and Cell)

Table of Contents

About

The grid component permits to create complex layout based

  • on row
  • and cell

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.

Example

Basic two columns

The combostrap grid will layout nicely your cells uniformly on the horizontal. They are also readable from the start from a mobile device. 

<row spacing="p-5">
    <cell background-color="green" color="white">
        First paragraph in the first cell.
        
        Second paragraph in the first cell.
    </cell>
    <cell background-color="blue" color="white" vertical="center">
        Second cell
     </cell>
</row>
  • Output:

First paragraph in the first cell.

Second paragraph in the first cell.

Second cell

As you can see, the dimension of the the cells are not uniform, this is why the background is never used inside a grid.

Card with a media

You can also use the grid in a card to create all sort of layout.

Example of a card: 

<card background-color="light" align="center" width="fit" >
    <row>
      <cell >
        {{ :styling:subway_card_tile.png?0x180 |}}
      </cell>
      <cell>
        === Card Clickable Grid ===
        This placeholder content is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.
    
        [[#custom_card|Custom card]]
      </cell>
    </row>
</card>

The image (styling:subway_card_tile.png) does not exist

Card Clickable Grid

This placeholder content is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.

Custom card

Powered by ComboStrap