2.1 #permalink Grid

Toggle example guides Toggle HTML markup

We use a 12-column grid with the ability to change layouts based on four viewport sizes:

Size Reference Device Class Prefix Minimum Size
Default Mobile n/a n/a
Medium Mobile landscape / tablet md 35.5em (568px at 16px/em)
Medium-Large Tablet landscape / desktop ml 48em (768px at 16px/em)
Large Desktop lg 64em (1024px at 16px/em)
X-Large Widescreen desktop xl 80em (1280px at 16px/em)

Resize your window to see the columns adapt.

We (attempt to) achieve all our layout needs using display:inline-block and position:absolute instead of the float property. One immediate consequence is that since grid elements are inline-block, they have small spaces between them. To see why, think of these inline-block elements like words. The DOM lays them out sequentially, left-to-right, and since there's whitespace in the markup between them, space is inserted (just like there's space inserted between words in text). Therefore we need to use the class grid-parent for an element which contains grid elements. This class decreases the letter-spacing property and magically makes everything work out.

Example

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Dolor Sit Amet

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Proident laborum

In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Praesent consectetur

Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.

By Sylwia Bartyzel from unsplash.com

Seven 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.

Five Columns

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

Markup
<div class="grid-parent">
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Lorem Ipsum</h3>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Dolor Sit Amet</h3>
         <p>
            Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Proident laborum</h3>
         <p>
            In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
         </p>
      </div>
   </div>
   <div class="grid-12 grid-md-6 grid-lg-3">
      <div class="box-padded">
         <h3>Praesent consectetur</h3>
         <p>
            Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
         </p>
      </div>
   </div>
   <div class="grid-12">
      <img class="img-cover" src="https://s3.amazonaws.com/ooomf-com-files/wjNV6gWuQkqeuH8txHc9_sylwiabartyzel_unsplash_tatry_03.jpg" alt="By Sylwia Bartyzel from unsplash.com">
   </div>
   <div class="grid-7">
      <div class="box-padded">
         <h3>Seven 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="grid-5">
      <div class="box-padded">
         <h3>Five 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 4