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.
Create a grid in just two steps, that simple.
* 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.
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%.
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:
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.
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).
You can get the same result using a single row by adding an element, w-100 where you want to break the row.
w-100 It can be a i or div or span among others.
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
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
This is an example of nested columns, using containers e-cols plus the number of columns needed. Perfect to create your layout.
Some examples of the grid designs that you can achieve for your website quickly and easily.
If you are using our framework in a product that generates income,
you can also help its maintenance if you wish, if you frequently help in your company
or personal developments consider making a recurring donation.
If you want to see your company's logo on this site it's time to be a serious Sponsor.