Menu

Layout: Flex grid

Classical grid

100%
50%
50%
33%
33%
33%
25%
25%
25%
25%
20%
20%
20%
20%
20%
<div class="grid-flex">
	<div class="column">50%</div>
	<div class="column">50%</div>
</div>

Custom width

By default, to create a column, you just need .column class.
If you want to add a custom width on this column, you have to add .w-XX where XX is a number between 0 and 100. Check the example below.

8%
32%
11%
29%
14%
6%
<div class="grid-flex">
	<div class="column w-8">8%</div>
	<div class="column w-32">32%</div>
	<div class="column w-11">11%</div>
	<div class="column w-29">29%</div>
	<div class="column w-14">14%</div>
	<div class="column w-6">6%</div>
</div>

Offset

Sometimes you just need to put something on the right of the screen, or on the center...this is the purpose of offset.
Use .o-XX where XX is a number between 0 and 100 to create an offset.

50% column + 50% offset
33.3333% column + 20% offset
<div class="grid-flex">
	<div class="column w-50 o-50">50% column + 50% offset</div>
</div>
<div class="grid-flex">
	<div class="column w-33 o-20">33.3333% column + 20% offset</div>
</div>

Vertical alignment

Use .v-align-top v-align-middle or v-align-bottom to create a vertical alignment.

Vertical
Align
Top
Vertical
Align
Middle
Vertical
Align
Bottom
<div class="grid-flex v-align-top">
	<div class="column w-33">Vertical</div>
	<div class="column w-33">Align</div>
	<div class="column w-33">Top</div>
</div>

<div class="grid-flex v-align-middle">
	<div class="column w-33">Vertical</div>
	<div class="column w-33">Align</div>
	<div class="column w-33">Middle</div>
</div>

<div class="grid-flex v-align-bottom">
	<div class="column w-33">Vertical</div>
	<div class="column w-33">Align</div>
	<div class="column w-33">Bottom</div>
</div>

Responsive

It is quite difficult to have an universal solution for responsive grid, that's why we suggest you to create your own CSS rules for this.

<div class="grid-flex grid-articles">
	<div class="column w-33">
		<article>...</article>
	</div>
	<div class="column w-33">
		<article>...</article>
	</div>
	<div class="column w-33">
		<article>...</article>
	</div>
</div>
/*.grid-flex is the main class and
.grid-articles helps you for responsive. */

.grid-articles {
  @media(max-width: 767px) {
    .column.w-33 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}