System Grid Layout

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.


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
  <div class="e-cols">
    <div class="e-col">
      e-col 1
    </div>
    <div class="e-col">
      e-col 2
    </div>
    <div class="e-col">
      e-col 3
    </div>
  </div>
  

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
      <div class="e-cols centered">
        <div class="e-col">...</div>
        <div class="e-col">...</div>
      </div>
      

* Add between to the container to maintain a spacing between each column. example:
Column
Column
Column
      <div class="e-cols between">
        <div class="e-col">...</div>
        <div class="e-col">...</div>
        <div class="e-col">...</div>
      </div>
      

* Add align-start to the container to align its columns at the beginning of the container, example:
Column
Column
      <div class="e-cols align-start">
        <div class="e-col">...</div>
        <div class="e-col">...</div>
      </div>
      

* Add align-end to the container to line up its columns at the end of the container, example:
Column
Column
      <div class="e-cols align-start">
        <div class="e-col">...</div>
        <div class="e-col">...</div>
      </div>
      

* 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
      <div class="e-cols no-gap">
        <div class="e-col">...</div>
        <div class="e-col">...</div>
        <div class="e-col">...</div>
      </div>
      

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:
      <div class="e-cols">
        <div class="e-col">...</div>
        <div class="e-col centered">...</div>
      </div>
      
* Add between to its columns to maintain a spacing between its contents. example:
      <div class="e-cols">
        <div class="e-col">...</div>
        <div class="e-col between">...</div>
      </div>
      
* Add align-start to the container to align its content at the beginning of the column, example:
      <div class="e-cols">
        <div class="e-col">...</div>
        <div class="e-col align-start">...</div>
      </div>
      
* Add align-end to the container to align its content at the end of the column, example:
      <div class="e-cols">
        <div class="e-col">...</div>
        <div class="e-col align-end">...</div>
      </div>
      

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
  <div class="e-cols">
    <div class="e-col">...</div>
    <div class="e-col">...</div>
  </div>

  <div class="e-cols">
    <div class="e-col">...</div>
    <div class="e-col">...</div>
    <div class="e-col">...</div>
  </div>
  

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.

  <div class="e-cols">
    <div class="e-col">...</div>
    <div class="e-col">...</div>

    <i class="w-100"></i>

    <div class="e-col">...</div>
    <div class="e-col">...</div>
    <div class="e-col">...</div>
  </div>
  

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
  <div class="e-cols">
    <div class="e-col-8">...</div>
    <div class="e-col">...</div>
  </div>

  <div class="e-cols">
    <div class="e-col">...</div>
    <div class="e-col-4">...</div>
    <div class="e-col-2">...</div>
  </div>

  <!-- or -->

  <div class="e-cols">
    <div class="e-col-8">...</div>
    <div class="e-col">...</div>
    <i class="w-100"></i>
    <div class="e-col">...</div>
    <div class="e-col-4">...</div>
    <div class="e-col-2">...</div>
  </div>
  

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
<div class="e-cols">
  <header class="e-col-12">Header</header>
  <main class="e-col-12 centered">
    main container
    <div class="e-cols">
      <div class="e-col-8 centered">
        main 2
        <div class="e-cols">
          <div class="e-col">Banner</div>
        </div>
        <div class="e-cols between">
          <section class="e-col-3">Section 1</section>
          <section class="e-col-3">Section 2</section>
          <section class="e-col-3">Section 3</section>
        </div>
      </div>
      <div class="e-col-4">Aside</div>
    </div>
  </main>
  <footer class="e-col centered">Footer</footer>
</div>

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
  <div class="e-cols">
    <div class="e-col-12">Header</div>
    <div class="e-col-8">Main</div>
    <div class="e-col-4">Aside</div>
    <div class="e-col-4">Section 1</div>
    <div class="e-col-4">Section 2</div>
    <div class="e-col-4">Section 3</div>
    <div class="e-col-12">Footer</div>
  </div>
  

Header
Aside
Main
Section 1
Section 2
Footer
  <div class="e-cols">
    <div class="e-col-12">Header</div>
    <div class="e-col-4">Aside</div>
    <div class="e-col-8">Main</div>
    <div class="e-col">Section 1</div>
    <div class="e-col">Section 2</div>
    <div class="e-col-12">Footer</div>
  </div>
  
Contribute on GitHub
Become a sponsor.

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.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron