FLEXGRID PRESETS MADE WITH MOD CSS

See below some examples on how to use our grid based on flexbox. We help you to better use MOD CSS by providing of multiples combinations : single grid, multi-columns, multi rows, using of css units.. and much more.

To get the code snippet, click to right, on icon

Simple Flexgrid

Simple flexgrid with a container, one row and two columns.

25%
75%
HTML 
                    
   <div :mod="container[100%]">
        <div :mod="row[100%]">
            <div :mod="col[25%]">25%</div>
            <div :mod="col[75%]">75%</div>
        </div>
    </div>

Flexgrid with justify-content

Sometimes, you want to add custom space between columns. You want to do this without having to set a gap value between the columns. With MOD CSS, you can set columns with custom value less than 100% and mix with a justify-content property. This approach can be useful in some cases when you want to add gap also both sides of each columns.

30%
30%
30%
HTML 
                    
    <div :mod="container[100%]">
        <div :mod="row[100%]" :box="jus.c[space-evenly]">
            <div :mod="col[30%]">30%</div>
            <div :mod="col[30%]">30%</div>
            <div :mod="col[30%]">30%</div>
        </div>
    </div>

Flexgrid with gap

We have a native gap property for setting gap between columns. You can use it with any css unit to control more precisely gap between them.
So, when you define the row size, add a second value to set a column-gap property.

However, the gap value(s) are include in total row width plus each column width. The total gap value is in according of number of columns in the row.
In example below, we keep a margin when we define each column's width for matching with a total value of 100%.
row = gaps + columns's width ; (gaps = 2% * 4)

24%
23%
23%
24%
HTML 
                        
    <div :mod="container[100%]">
        <div :mod="row[100% 2%]">
            <div :mod="col[24%]">24%</div>
            <div :mod="col[23%]">23%</div>
            <div :mod="col[23%]">23%</div>
            <div :mod="col[24%]">24%</div>
        </div>
    </div>

Row with custom width

You can define row with any custom CSS unit. Below, we use viewport's width unit to set row's width.

auto
auto
HTML 
            
    <div :mod="container[100%]">
        <div :mod="row[70vw]">
            <div :mod="col[50%]">auto</div>
            <div :mod="col[50%]">auto</div>
    </div>

Column with offset

You can add an offset to any column to satisfy your UI design.
To do this, we add a second value to column. The second value will be considered like an offset.
Below, we define it in rem but you can use any unit you want.

auto offset 10rem
HTML 
                
    <div :mod="container[100%]">
        <div :mod="row[50%]">
            <div :mod="col[auto 10rem]">auto offset 10rem</div>
        </div> 
    </div>

Row with column fit

In some case, you want to define column with automatic value in according of remain space and/or in according its content.
Below, the two first columns, must be displayed in according their contents.
the third, will get all remain space.

column fit
column fit 2
column auto
HTML 
            
    <div :mod="container[100%]">
        <div :mod="row[100%]">
            <div :mod="col[fit]">column fit</div>
            <div :mod="col[fit]">column fit 2</div>
            <div :mod="col[auto]">column auto</div>
        </div>
    </div>

Row with column auto

It is common to define all columns in automatic width. So, each column will get the same width.

column auto
column auto 2
column auto 3
HTML 
                
   <div :mod="container[100%]">
        <div :mod="row[100%]">
            <div :mod="col[auto]">column auto</div>
            <div :mod="col[auto]">column auto 2</div>
            <div :mod="col[auto]">column auto 3</div>
        </div>
    </div>

Flexgrid with multi rows

You can add many rows with any type of configuration inside the same container.
The only limit, is your creativity.

Keep in mind, our rows display inline-flex. So, you can set two rows side by side.

auto
auto
auto offset 5%
auto
row fit & column fit offset 35%
51.5%
22%
auto
HTML 
                
     <div :mod="container[100%]">
        <div :mod="row[auto]">
            <div :mod="col[auto]">auto</div>
            <div :mod="col[auto]">auto</div>
        </div>
    
        <div :mod="row[80%]">
            <div :mod="col[auto 5%]">auto offset 5%</div>
            <div :mod="col[auto]">auto</div>
        </div>
                

        <div :mod="row[fit]">
            <div :mod="col[fit 35%]">row fit & column fit offset 35%</div>
        </div>
    
        <div :mod="row[100%]">
            <div :mod="col[51.5%]">51.5%</div>
            <div :mod="col[22%]">22%</div>
            <div :mod="col[auto]">auto</div>
        </div>
    </div>

Flexgrid with multi rows & column

Here, you can see an example in which we used many different CSS units inside a same row.

5rem
25%
auto
auto offset 5%
fit with offset 15%
250px
10vmax
12em
auto
27vh
400px
HTML 
                    
    <div :mod="container[100%]">
        <div :mod="row[auto]">
            <div :mod="col[5rem]">5rem</div>
            <div :mod="col[25%]">25%</div>
            <div :mod="col[auto]">auto</div>
        </div>
    
        <div :mod="row[100%]">
            <div :mod="col[auto 5%]">auto offset 5%</div>
            <div :mod="col[fit 15%]">fit with offset 15%</div>
            <div :mod="col[250px]">250px</div>
            <div :mod="col[10vmax]">10vmax</div>
        </div>
    
        <div :mod="row[auto]">
            <div :mod="col[12em]">12em</div>
            <div :mod="col[auto]">auto</div>
            <div :mod="col[27vh]">27vh</div>
            <div :mod="col[400px]">400px</div>
        </div>
    </div>

Flexgrid with multi units

Like previous example, we mixed many CSS units to compose a flexgrid.
You can literally make any composition with our flexible grid.

5rem
25%
auto
auto offset 5%
fit with offset 15%
250px
10vmax
4em
22%
32vh
250px
auto
HTML 
                        
    <div :mod="container[100%]">
        <div :mod="row[auto]">
            <div :mod="col[5rem]">5rem</div>
            <div :mod="col[25%]">25%</div>
            <div :mod="col[auto]">auto</div>
        </div>
    
        <div :mod="row[100%]">
            <div :mod="col[auto 5%]">auto offset 5%</div>
            <div :mod="col[fit 15%]">fit with offset 15%</div>
            <div :mod="col[250px]">250px</div>
            <div :mod="col[10vmax]">10vmax</div>
        </div>
    
        <div :mod="row[700px]">
            <div :mod="col[12em]">12em</div>
            <div :mod="col[22%]">22%</div>
            <div :mod="col[32vh]">32vh</div>
            <div :mod="col[250px]">250px</div>
            <div :mod="col[auto]">auto</div>
        </div>
    </div>