Mesh is a simple grid that will fall-back to the old-style grid to avoid your typical internet-explorer issues. It supports most grid functionality and utilizes CSS margin collapsing to make the grid pad items accordingly.

If you want to learn more about grids, check out this documentation that Mozilla wrote on it. It contains the fundamentals for this grid system too.

Mesh is a simple grid that will fall-back to the old-style grid to avoid your typical internet-explorer issues. It supports most grid functionality and utilizes CSS margin collapsing to make the grid pad items accordingly.

If you want to learn more about grids, check out this documentation that Mozilla wrote on it. It contains the fundamentals for this grid system too.

Using the mesh is quite easy. To create your common product grid that you see on most e-commerce sites these days, you can initialize it as follows:

<div class="col-container">
  <div class="col-xs-12 col-l-6 col-xl-4">
    Item 1
  </div>
  <div class="col-xs-12 col-l-6 col-xl-4">
    Item 2
  </div>
  ...
</div>

You can also nest meshes. Because it utilizes margin collapsing, your grid will always remain aligned perfectly.

<div class="col-container">
  <div class="col-xs-12 col-l-6 col-xl-4">
    <div class="col-container">
      ...
    </div>
  </div>
</div>

You can also add spacing between your grid elements by adding more classes to your grid container element:

<div class="col-container col-container-xs--gap-4--x col-container-xs--gap-2--y">
</div>

We also can utilize sections to unify margins within a mesh-unit, these will add proper spacing between stacked elements without making the last item overflow and misalign the mesh:

<div class="col-container">
  <div class="col-xs-12 col-l-6 col-xl-4">
    <div class="section-xs-4">
      This element will not have any margin on the top
    </div>
    <div class="section-xs-4">
      This element will have margin on the top to space the elements
    </div>
    <div class="section-xs-4">
      This one too
    </div>
  </div>
</div>

You can also pull and push units, so that you dont have to add garbage units to align something accordingly. So now you dont have to do this:

<div class="col-container">
  <div class="col-xs-5">
  </div>
  <div class="col-xs-7">
  </div>
</div>

But instead you can do this:

<div class="col-container">
  <div class="col-xs-7 col-xs--push-col-5">
  </div>
</div>