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.
<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.
<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)
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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>
With custom attributes New
With our lastest release, you can define your own attributes in order to improve compatibility with another js based frameworks.
So, you can set a flexible grid with two ways :
*With grid attribute
// Firstly, define your attribute via JS
<script>
ModCSS.attributes({
grid: 'mod',
props: 'xyz',
})
</script>
// Set your grid with flexgrid attribute
<div mod="row[100%]">
<div mod="col[5rem]" xyz="co[orange]">5rem</div>
<div mod="col[25%]">25%</div>
<div mod="col[auto]">auto</div>
</div>
*With props attribute
// Define your attribute via JS like below
<script>
ModCSS.attributes({
props: 'xyz',
})
</script>
// Set your grid with property attribute
// In this case, add '$' to the end of each flexgrid property
<div xyz="row$[100%]">
<div xyz="col$[5rem] co[orange]">5rem</div>
<div xyz="col$[25%]">25%</div>
</div>
<div :var=".col{ col$[auto] h[10px] }">auto</div>
Read more about here.