<div class="sample-grid">
  <h4>Evenly Divided</h4>
  <div class="grid-x grid-margin-x">
    <div class="cell auto">One</div>
    <div class="cell auto">Two</div>
    <div class="cell auto">Three</div>
    <div class="cell auto">Four</div>
    <div class="cell auto">Five</div>
    <div class="cell auto">Six</div>
  </div>
</div>

<div class="sample-grid">
  <h4>Spans 4 Cells + Auto Width</h4>
  <div class="grid-x grid-margin-x">
    <div class="cell small-4">4 cells</div>
    <div class="cell auto">Whatever's left!</div>
  </div>
</div>

<div class="sample-grid">
  <h4>Content + Sidebars </h4>
  <div class="grid-x grid-margin-x">
    <div class="cell small-3">Sidebar 1</div>
    <div class="cell auto">Content</div>
    <div class="cell small-3">Sidebar 2</div>
  </div>
</div>