Grid

Responsive grid system and mobile first.
Adaptable and modular.

Sistema de grid

Included a responsive system based on mobile first that incrementally adjusts up to 12 columns depending on the size of the device or window. Includes predefined classes to create columns.

  • First create the container columns with class .row.
  • Then declare the container of each column with the class .grid- concatenated with the number of columns you want.
  • The divs with class .grid- for the same .row must amount to 12 columns.

Types of classes for columns:

grid-12

 

grid-1

grid-11

 

grid-2

grid-10

 

grid-3

grid-9

 

grid-4

grid-8

 

grid-5

grid-7

 

grid-6

grid-6

 

Exemple de dues columnes

Columna 50%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor. Cras auctor elit ut turpis mattis, in gravida nisl convallis.

Columna 50%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

                
<!-- Exemple de dues columnes del 50% -->
<div class="row">
    <div class="grid-6">
        (...)
    </div>
    <div class="grid-6">
        (...)
    </div>
</div>
                            
                        

Exemple de tres columnes

Columna 33%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

Columna 33%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

Columna 33%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

                
<!-- Exemple de tres columnes del 33.33% -->
<div class="row">
    <div class="grid-4">
        (...)
    </div>
    <div class="grid-4">
        (...)
    </div>
    <div class="grid-4">
        (...)
    </div>
</div>
                            
                        

Exemple de columna del 75% i una del 25%

Columna 75%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor. Cras auctor elit ut turpis mattis, in gravida nisl convallis.

Columna 25%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

                
<!-- Exemple de columna del 75% i una del 25% -->
<div class="row">
    <div class="grid-9">
        (...)
    </div>
    <div class="grid-3">
        (...)
    </div>
</div>