2.1.1 #permalink A 5-column grid with the ability to change layouts based on four viewport sizes (same as our default grid)

Toggle example guides Toggle HTML markup

Resize your window to see the columns adapt.

Example

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing.

Dolor Sit Amet

Quis nostrud exercitation ullamco laboris nisi ut.

Proident laborum

In culpa qui officia deserunt mollit anim id est.

Praesent consectetur

Etiam vitae orci sed elit sagittis finibus ut.

Ullamco Laboris

Integer vitae lectus accumsan, egestas dui eget.

Deserunt Mollit Anim

Maecenas tempor pulvinar orci nec pellentesque.

Mollit quis

In culpa qui officia deserunt mollit anim id est.

Pulvinar orci nec

Etiam vitae orci sed elit sagittis finibus ut.

Nostrud Ullamco

In culpa qui officia deserunt mollit anim id est.

Three Columns

Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.

Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.

Two Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.

Markup 
<div class="grid-parent">
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Lorem Ipsum</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Dolor Sit Amet</h3>
         <p>
            Quis nostrud exercitation ullamco laboris nisi ut.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-1 grid5-lg-1">
      <div class="box-padded">
         <h3>Proident laborum</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Praesent consectetur</h3>
         <p>
            Etiam vitae orci sed elit sagittis finibus ut.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-1 grid5-lg-1">
      <div class="box-padded">
         <h3>Ullamco Laboris</h3>
         <p>
            Integer vitae lectus accumsan, egestas dui eget.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Deserunt Mollit Anim</h3>
         <p>
            Maecenas tempor pulvinar orci nec pellentesque.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-1 grid5-lg-1">
      <div class="box-padded">
         <h3>Mollit quis</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Pulvinar orci nec </h3>
         <p>
            Etiam vitae orci sed elit sagittis finibus ut.
         </p>
      </div>
   </div>
   <div class="grid5-5 grid5-md-2 grid5-lg-1">
      <div class="box-padded">
         <h3>Nostrud Ullamco</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est.
         </p>
      </div>
   </div>
   <div class="grid5-3">
      <div class="box-padded">
         <h3>Three Columns</h3>
         <p>
            Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
         </p>
         <p>
            Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
         </p>
      </div>
   </div>
   <div class="grid5-2">
      <div class="box-padded">
         <h3>Two Columns</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
         </p>
      </div>
   </div>
</div>
Source: layout/grid_gg.less, line 89