Examples
Don't forget to resize your window and use F12 to check all options of this grid!
1. The easiest way to use it - just add the class .flex_grid to the parent element.
Without specifying classes to child div elements they will stand equally.
Because by default child of .flex_grid has style flex: 1;
2. You also have an option to specify grid in a mobile-first way.
Use only for desktop .flex_grid__rwd
Use for desktop & tablet .flex_grid__mob
3. Basic customization of column width.
Based on the 12-column system.
Classes: ._col_1, ._col_2, ._col_3, ._col_4,
._col_5, ._col_6, ._col_7, ._col_8,
._col_9, ._col_10, ._col_11, ._col_12
4. Easily configure the gap between columns.
Just assign new value to --grid-gap property of current .flex_grid container. Default gap is 20px
5. Use the flexibility of flex: 1;
There is an option to add a class only to one child element and let another fill the rest of the space.
It could be useful for default article & aside combination.
6. Change the column width for a tablet.
* Note that this width will stay for mobile if you won't specify for mobile separately.
Just apply additional child classes like .__50_rwd to specify the new width.
Classes: .__rwd = flex: 1;, .__25_rwd = width: 25%;, .__33_rwd = width: 33.3%;,
.__50_rwd = width: 50%;, .__full_rwd = width: 100%;
* Tablet breakpoint starts on 1024px
7. Change the column width for a mobile.
* Pretty much the same logic as for tablet.
Just apply additional child classes like .__50_mob to specify the new width.
Classes: .__mob = flex: 1;, .__25_mob = width: 25%;, .__33_mob = width: 33.3%;,
.__50_mob = width: 50%;, .__full_mob = width: 100%;
* Mobile breakpoint starts on 767px
8. More complex example.
* Try to resize the window.