DEV Community

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

Posted on β€’ Edited on

2

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>
    </div>
</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
Github

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay