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%] ju.co[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%]">
// 1rst row
<div mod="row$[auto]">
<div mod="col$[150px]">auto</div>
<div mod="col$[auto]">auto</div>
</div>
// 2nd row
<div mod="row$[80%]">
<div mod="col$[auto 5%]">auto offset 5%</div>
<div mod="col$[auto]">auto</div>
</div>
// 3rd row
<div mod="row$[fit]">
<div mod="col$[fit 35%]">row$ fit & column fit offset 35%</div>
</div>
// 4th row
<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%]">
// 1rst row
<div mod="row$[auto]">
<div mod="col$[5rem]">5rem</div>
<div mod="col$[25%]">25%</div>
<div mod="col$[auto]">auto</div>
</div>
// 2nd row
<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>
// 3rd row
<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%]">
// 1rst row
<div mod="row$[auto]">
<div mod="col$[5rem]">5rem</div>
<div mod="col$[25%]">25%</div>
<div mod="col$[auto]">auto</div>
</div>
// 2nd row
<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>
// 3rd row
<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.
// Firstly, define your attribute via JS
<script>
ModCSS.attributes({
props: 'xyz',
})
</script>
// Set your grid with flexgrid attribute
<div xyz="row$[100%]">
<div xyz="col$[5rem] co[orange]">5rem</div>
<div xyz="col$[25%]">25%</div>
<div xyz="col$[auto]">auto</div>
</div>
Read more about here.