--- layout: default permalink: /grid category: layout title: System Grid description: "We use a standard 12-column grid system. The grid is built with Flexbox technology, totally responsive. It will help you to design your pages in an easy and orderly way, a system of simple and receptive columns." ---

{{ page.title }} Layout

{{ page.description }}


Use

Create a grid in just two steps, that simple.

Steps:

* Add e-cols container of columns.

* Add e-col as many as you need.

Each column will have an equal width with the class e-col , You can create countless columns, but it is advisable to use a maximum of 12.

e-col 1
e-col 2
e-col 3
{% highlight html %}
e-col 1
e-col 2
e-col 3
{% endhighlight %}

The previous example creates three columns of equal self-incremental width in devices> = 1024px (Desktop), its size is based on the screen, while in mobile devices and tablets the columns take a size of 100%.

How it works


e-cols

This is the container that wraps the columns. This makes the role of a row so if you add more than 12 columns that do not enter the space of a row automatically low to the next row avoiding break the vizualizacion of its content.

There are some classes attributed to the container of columns, you can see them below:

* Add centered to the container to center its columns vertically and horizontally example:
Column
Column
{% highlight html %}
...
...
{% endhighlight %}
* Add between to the container to maintain a spacing between each column. example:
Column
Column
Column
{% highlight html %}
...
...
...
{% endhighlight %}
* Add align-start to the container to align its columns at the beginning of the container, example:
Column
Column
{% highlight html %}
...
...
{% endhighlight %}
* Add align-end to the container to line up its columns at the end of the container, example:
Column
Column
{% highlight html %}
...
...
{% endhighlight %}
* Add no-gap to the container to eliminate the padding / space added to the columns. example:
No-gap / Column
No-gap / Column
No-gap columns
{% highlight html %}
...
...
...
{% endhighlight %}

e-col

This is the class of the columns, they indicate the number of columns that you want to use from the possible 12 recommended per row. So, if you want columns of the same width use e-col for specific columns add Example: e-col-6.

There are some classes attributed to the columns, you can see them below:
Same as the previous example but in the content of the columns.

* Add centered to its columns to center its content vertically and horizontally. example: {% highlight html %}
...
...
{% endhighlight %} * Add between to its columns to maintain a spacing between its contents. example: {% highlight html %}
...
...
{% endhighlight %} * Add align-start to the container to align its content at the beginning of the column, example: {% highlight html %}
...
...
{% endhighlight %} * Add align-end to the container to align its content at the end of the column, example: {% highlight html %}
...
...
{% endhighlight %}

Automatic columns.

This is a grid layout to expose an example of two rows of automatic columns that span all the space available in your row (e-cols).


Auto
Auto
Auto
Auto
Auto
{% highlight html %}
...
...
...
...
...
{% endhighlight %}
Other ways using only one row (e-cols)

You can get the same result using a single row by adding an element, w-100 where you want to break the row.

{% highlight html %}
...
...
...
...
...
{% endhighlight %}

w-100 It can be a i or div or span among others.

All sizes


e-col e-col-1 e-col-2 e-col-3 e-col-4

e-col-5 e-col-6 e-col-7 e-col-8 e-col-9

e-col-10 e-col-11 e-col-12

Apply sizes for each individual column.

You can define the size of each column individually in a simple way and with short classes. There are 12 defined sizes each modifier class is named after the number of columns you want out of 12 available.

e-col-x e-col-4 e-col-6 e-col-8 e-col-10

e-col-8
Auto
Auto
e-col-4
e-col-2
{% highlight html %}
...
...
...
...
...
...
...
...
...
...
{% endhighlight %}

Nesting

This is an example of nested columns, using containers e-cols plus the number of columns needed. Perfect to create your layout.


Header
main container
main 2
Banner
Section 1
Section 2
Section 3
Aside
Footer
{% highlight html %}
Header
main container
main 2
Banner
Section 1
Section 2
Section 3
Aside
{% endhighlight %}

Grid Layouts

Some examples of the grid designs that you can achieve for your website quickly and easily.


Header
Main
Aside
Section 1
Section 2
Section 3
Footer
{% highlight html %}
Header
Main
Aside
Section 1
Section 2
Section 3
Footer
{% endhighlight %}
Header
Aside
Main
Section 1
Section 2
Footer
{% highlight html %}
Header
Aside
Main
Section 1
Section 2
Footer
{% endhighlight %}