DEV Community

Cover image for CSS Flexbox (Flexgrid) and how to use it quick ?

Posted on • Updated on


CSS Flexbox (Flexgrid) and how to use it quick ?

Flexbox make easier design of flexible responsive layout structure.

When you are new to CSS, it can be difficult to create a flexbox grid yourself. The easiest way is to use a framework or library that does it good.
MOD-CSS does this easily and quickly with extensive customization options.

For example,

the following code creates a simple grid with one container, three columns and one row:

<div :mod="container[90%]">
    <div :mod="row[100%]">
        <div :mod="column[20%]"> ...col1 </div>
        <div :mod="column[40%]"> ...col2 </div>
        <div :mod="column[fit]"> ...col3 </div>

Enter fullscreen mode Exit fullscreen mode

Find this snippet on codepen

More examples are available
If you want to see more setup, get links below :
Offical documentation
More example

What is MOD-CSS ?

It was designed to be a good alternative to bootstrap and tailwind.
It is lightweight and quite complete.

Offical website

Top comments (0)

Advice For Junior Developers

Advice from a career of 15+ years for new and beginner developers just getting started on their journey.