Get started in no time
With simple and human readable class names, you can get up and running with Flexit in no time.
content
content
content
<div class="container">
<section class="row">
<div class="one column">
<p>Section</p>
<div class="five columns">
<p>Section</p>
<div class="six columns">
<p>Section</p>
</div>
</section>
</div>
The Container
Flexit container has a max-width of 960px and it shrinks relatively with the screen size. The container has a padding of 0px 10px so it doesn't touch the edges on smaller screens.
content
content
<section>
<div class="container">
<div class="row">
<div class="six columns">
<p>content</p>
</div>
<div class="six columns">
<p>content</p>
</div>
</div>
</div>
</section>
The Grid
three
nine
one
five
six
auto
auto
auto
six
four
two
Nested Grids
You can make any number of child rows in columns to create nested grid layout.
content
content
content
content
<div class="container">
<div class="row">
<div class="four columns">
<div class="row">
<div class="columns">
<div class="box-column">
<p>content</p>
</div>
</div>
<div class="columns">
<div class="box-column">
<p>content</p>
</div>
</div>
</div>
</div>
</div>
</div>
Auto width Columns
You can add as many columns as you want in a row. Don't specify any fixed size of the columns and the grid will fit these auto width columns based on the size available in the row.
auto
auto
auto
auto
<div class="row">
<div class="column">
<div class="box-column">
<p>auto</p>
</div>
</div>
<div class="column">
<div class="box-column">
<p>auto</p>
</div>
</div>
<div class="column">
<div class="box-column">
<p>auto</p>
</div>
</div>
<div class="column">
<div class="box-column">
<p>auto</p>
</div>
</div>
</div>
Offset
You can use column-offset classes to create custom spacing between your columns.
three
six + three offset
two
two + two offset
five + one offset
<div class="row">
<div class="three columns">
<div class="box-column">
<p>three</p>
</div>
</div>
<div class="column-offset-3 six columns">
<div class="box-column">
<p>six + three offset</p>
</div>
</div>
</div>
Flexbox Utilities
Flexit implements a set of useful utilities present in Flexbox as helper classes. You can make the use of them to accelerate your development.
Distribute elements in a row
Around
three
three
three
<div class="row around">
...
</div>
Between
three
three
three
<div class="row between">
...
</div>
Evenly
three
three
three
<div class="row even">
...
</div>
Align columns
Start
five
<div class="row start">
...
</div>
Center
six
<div class="row center">
...
</div>
End
three
<div class="row end">
...
</div>
No hidden surprises
The motive behind creating another flexbox grid is precisely this. Flexit doesn't make any preassumptions and there's no hacky code. As a result, you take full control over how the columns and row will be aligned and can even control the spacing between them.