Flex One - 1 CSS Class System

Flex One is CSS Layout system based on one CSS class. This class: .fluid {flex:1}

With this .fluid {flex:1} you can build entire CSS grid system.

Let me show you how it works:

.main{display: flex; flex-flow: row wrap;  width: 80%; margin: 0 auto}

.fluid{flex:1}

.clear{width: 100%}

This CSS is the base for everything. With this CSS you can build solid Grid System.

<div class="fluid">33,3%</div>
<div class="fluid">33,3%</div>
<div class="fluid">33,3%</div>
<div class="clear"></div>

<div class="fluid">25%</div>
<div class="fluid">25%</div>
<div class="fluid">25%</div>
<div class="fluid">25%</div>
<div class="clear"></div>

Super simple, just add the number of columns you need. You can have infinite number of columns. Plus is fluid with natural responsiveness.

When you are finished add the .clear class.

Here is the Demo Grid

Here is clear dynamic example on how .fluid {flex:1} works

Limitations? Yes, many.

One of the biggest limitation is: you must use identical size columns. You can't have 1-1-1-3 or 1-2-1 grid.

We can fix these limitations by adding some CSS code:

.merge2 {flex:2}
.merge3 {flex:3}

Now we can have this 1-1-1-3:

<div class="fluid">1</div>
<div class="fluid">1</div>
<div class="fluid">1</div>
<div class="merge3">Merge 3</div>
<div class="clear"></div>

What about nested columns?

We can use this code for the nested columns:

.nested{display: flex; flex-flow: row wrap; padding:0 !important; margin:0 !important; border: 0 !important}

<div class="fluid nested">
    <div class="fluid">Nested column</div>
    <div class="fluid">Nested column</div>
</div>

Inside any fluid column we can insert any number of other fluid columns by adding the .nested class.

Ok. What about gutter?

The Gutter is optional. If you need it you can use something like this:

.fluid,.merge2,.merge3 {margin:0 0 0 15px}

// or maybe

.fluid,.merge2,.merge3,.merge4 {padding:0 10px}

Some other tweaks.

Here is also alternative to the .clear class:

<div class="fluid"></div>
<div class="fluid"></div>
<div class="fluid"></div>
<div class="clear"></div>

// Alternative columns class:

<div class="columns">
<div class="fluid"></div>
<div class="fluid"></div>
<div class="fluid"></div>
</div>

Demo Complete Grid

Complete version of the CSS code is included in fluid.css and fluid.scss file

Conclusion

Starting with the .fluid{flex:1} class and by adding few other CSS classes we can build infinite column grid system that is fluid and responsive. You need just few lines of CSS to build solid layout system.

License

This project is licensed under the MIT License

P.S

We can push the system even further and use only 2 classes .column and .row and make it more semantic.

// Just 2 classes for the layout

.column{display: flex; flex-flow: row wrap;  width: 80%; margin: 0 auto}
.row{flex:1}

// Use the HTML like this:

<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
....
</div>

Demo Semantic Grid