How to use the grids (Mesh)

Documentation updated on December 6th.

Contents
1 Overview
2 Download
3 Class names
4 Gutters
5 Showroom
6 Examples
6.1 Two columns
6.2 Three equal columns
6.3 Nested grids
6.4 Four columns list
6.5 Simple layout

Overview

Mesh provides a set of CSS columns that makes the laying out of a website easy and fast.

Download

It isn't part of the CSS core, that's why you have to download the file and reference it on your HTML document:

Class names

Each column is expressed in fractions that represent a width percent of the content.

The class names replace the bar / in the fraction by a dash -:

  • 50% same as 1/2 same as class namech-g1-2
  • 75% same as 3/4 same as class namech-g3-4
  • 20% same as 1/5 same as class namech-g1-5

Gutters

The grids have neither padding nor margin. To be able to get the gutters, you have to assign a margin to the element that's inside the grid. For that, we defined 3 classes that create a margin to the inner element:

  • ch-leftcolumn: assign it to the left element.
  • ch-centercolumn: assign it to a centered element.
  • ch-rightcolumn: assign it to the right element.

Showroom

Check this awesome showroom to see the Mesh power!

Examples

Two columns

Left 1/3
Right 2/3
<div class="ch-g1-3">
    <div class="ch-leftcolumn">
        Left 1/3
    </div>
</div>
<div class="ch-g2-3">
    <div class="ch-rightcolumn">
        Right 2/3
    </div>
</div>

Three equal columns

Left 1/3
Center 1/3
Right 1/3
<div class="ch-g1-3">
    <div class="ch-leftcolumn">
        Left 1/3
    </div>
</div>
<div class="ch-g1-3r">
    <div class="ch-centercolumn">
        Center 1/3
    </div>
</div>
<div class="ch-g1-3">
    <div class="ch-rightcolumn">
        Right 1/3
    </div>
</div>

Nested grids

Left 1/4
Left 1/2
Right 1/2
Center 2/4
Right 1/4
<div class="ch-g1-4">
    <div class="ch-leftcolumn">
        Left 1/4
    </div>
</div>
<div class="ch-g2-4">
    <div class="ch-centercolumn">
         <div class="ch-g1-2">
              <div class="ch-leftcolumn">
                  Left 1/2
              </div>
         </div>
         <div class="ch-g1-2">
              <div class="ch-rightcolumn">
                  Right 1/2
              </div>
         </div>
         <div class="clearfix ch-actions">
                  Center 2/4
         </div>
    </div>
</div>
<div class="ch-g1-4">
    <div class="ch-rightcolumn">
        Right 1/2
    </div>
</div>

Four columns list

  • Lorem
  • Cras
  • Lobortis
  • Tincidunt
  • Ipsum
  • Commodo
  • Tellus
  • Rutrum
  • Sit
  • Magna
  • Sed
  • Mattis
  • Amet
  • Purus
  • Nulla
  • Elit
<div class="ch-clearfix">
   <ul class="ch-g1-4">
       <li><strong>Lorem</strong></li>
       <li>Cras</li>
       <li>Lobortis</li>
       <li>Tincidunt</li>
   </ul>
   <ul class="ch-g1-4">
       <li><strong>Ipsum</strong></li>
       <li>Commodo</li>
       <li>Tellus</li>
       <li>Rutrum</li>
   </ul>
   <ul class="ch-g1-4">
       <li><strong>Sit</strong></li>
       <li>Magna</li>
       <li>Sed</li>
       <li>Mattis</li>
   </ul>
   <ul class="ch-g1-4">
       <li><strong>Amet</strong></li>
       <li>Purus</li>
       <li>Nulla</li>
       <li>Elit</li>
   </ul>
</div>

Simple layout

You can see more layout templates here.

Header
Menu
Content
Footer
<div class="ch-g1">
   <div>Header</div>
</div>
<div class="ch-g1">
   <div class="ch-g1-4">
       <div class="ch-leftcolumn">Menu</div>
   </div>
   <div class="ch-g3-4">
       <div class="ch-rightcolumn">Content</div>
   </div>
</div>
<div class="ch-g1">
   <div class="ch-box-lite">Footer</div>
</div>