Skinny-Grid

Minimum Size
Clean and Pure
Support All Platform
Easy to use
Import As a Sass Module
Responsive Grid

Unpredictable behavior on Safari

Set your container to be flex


          .container {
            display: flex;
          }

Apply the Grid System


  <section class="s-grid"></section>

Basic Grids


  <section class="s-grid center">
     <div class="s-block">1/2</div>
     <div class="s-block">1/2</div>
  </section>

1/2


  <section class="s-grid center">
     <div class="s-block">1/3</div>
     <div class="s-block">1/3</div>
     <div class="s-block">1/3</div>
  </section>

1/3


  <section class="s-grid center">
     <div class="s-block">1/6</div>
     <div class="s-block">1/6</div>
     <div class="s-block">1/6</div>
     <div class="s-block">1/6</div>
     <div class="s-block">1/6</div>
     <div class="s-block">1/6</div>
  </section>

1/6

Auto Adapt Block


  <section class="s-grid center">
     <div class="s-block">Auto</div>
     <div class="s-block">1/3</div>
  </section>

Auto

1/3


  <section class="s-grid center">
     <div class="s-block">1/4</div>
     <div class="s-block">Auto</div>
     <div class="s-block">1/3</div>
  </section>

1/4

Auto

1/3


  <section class="s-grid center">
     <div class="s-block">Auto</div>
     <div class="s-block">Auto</div>
     <div class="s-block">1/6</div>
  </section>

Auto

1/6

Navigation Grid


  <nav class="nav-container s-nav-grid s-block">
    <ul class="s-block s-grid">
      <li class="s-nav-item"><a href="#Link">Link</a><li>
      <li class="s-nav-item">
        <a href="#Link">Link</a>
        <ul class="s-grid wrap">
          <li class="s-nav-item"><a href="#Link">SubLink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
        <ul>
      <li>
      <li class="s-nav-item"><a href="#Link">Link</a><li>
      <li class="s-nav-item"><a href="#Link">Link</a><li>
    </ul>
  </nav>


  <nav class="nav-container s-nav-grid s-block">
    <ul class="s-block s-grid center">
      <li class="s-nav-item"><a href="#Link">Link</a><li>
      <li class="s-nav-item">
        <a href="#Link">Link</a>
        <ul class="s-grid wrap">
          <li class="s-nav-item"><a href="#Link">SubLink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
        <ul>
      <li>
      <li class="s-nav-item"><a href="#Link">Link</a><li>
      <li class="s-nav-item"><a href="#Link">Link</a><li>
    </ul>
  </nav>


  <nav class="nav-container s-nav-grid s-block">
    <ul class="s-block s-grid align-end">
      <li class="s-nav-item"><a href="#Link">Link</a><li>
      <li class="s-nav-item">
        <a href="#Link">Link</a>
        <ul class="s-grid wrap">
          <li class="s-nav-item"><a href="#Link">SubLink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
          <li class="s-nav-item"><a href="#Link">Sublink</a><li>
        <ul>
      <li>
      <li class="s-nav-item"><a href="#Link">Link</a><li>
      <li class="s-nav-item"><a href="#Link">Link</a><li>
    </ul>
  </nav>

Nestable Grid


  <section class="s-grid">
    <div class="s-block s-grid">
      <div class="s-block">1/2</div>
      <div class="s-block">1/2</div>
    </div>
    <div class="s-block three-of-one">1/3</div>
  </div>

1/2

1/3


  <section class="s-grid">
    <div class="s-block s-grid">
      <div class="s-block">1/2</div>
      <div class="s-block">
        <div class="s-block">Auto</div>
        <div class="s-block">Auto</div>
      </div>
    </div>
    <div class="s-block">Auto</div>
  </div>

1/2

Auto

Align the Grids


  <section class="s-grid">
    <div class="s-block s-grid grid-top">
      <div class="s-block">Top Align</div>
      <div class="s-block">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.Sed lacus est, aliquet
        nec ornare ac,suscipit at elit. Maecenas
        sagittis nibh id ultrices gravida.Ut sed
        nibh ex. Etiam a viverra nulla.Maecenas
        enimrisus, feugiat nec lacus ut, congue
        dapib  us mauris
      </div>
      <div class="s-block">Top Align</div>
    </div>
  </div>

Top Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed lacus est, aliquet nec ornare ac,suscipit at elit. Maecenas sagittis nibh id ultrices gravida. Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim risus, feugiat nec lacus ut, congue dapibus mauris.

Top Align


  <section class="s-grid">
    <div class="s-block s-grid grid-Center">
      <div class="s-block">Center Align</div>
      <div class="s-block">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.Sed lacus est, aliquet nec ornare ac,suscipit
          at elit. Maecenas sagittis nibh id ultrices gravida.
          Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim
          risus, feugiat nec lacus ut, congue dapibus mauris.
      </div>
      <div class="s-block">Center Align</div>
    </div>
  </div>

Center Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus est, aliquet nec ornare ac,suscipit at elit. Maecenas sagittis nibh id ultrices gravida. Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim risus, feugiat nec lacus ut, congue dapibus mauris.

Center Align


  <section class="s-grid">
    <div class="s-block s-grid">
      <div class="s-block s-wrapper">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.Sed lacus est, aliquet nec ornare ac,suscipit
          at elit. Maecenas sagittis nibh id ultrices gravida.
          Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim
          risus, feugiat nec lacus ut, congue dapibus mauris.
      </div>
      <div class="s-block align-top">Top Align</div>
    </div>
  </div>

Bottom Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus est, aliquet nec ornare ac,suscipit at elit. Maecenas sagittis nibh id ultrices gravida. Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim risus, feugiat nec lacus ut, congue dapibus mauris.

Bottom Align


  <section class="s-grid">
    <div class="s-block s-grid">
      <div class="s-block s-wrapper">
        Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.Sed lacus est, aliquet
        nec ornare ac,suscipit at elit. Maecenas
        sagittis nibh id ultrices gravida.Ut sed
        nibh ex. Etiam a viverra nulla.Maecenas
        enimrisus, feugiat nec lacus ut, congue
        dapib  us mauris.
      </div>
      <div class="s-block align-top">Top Align</div>
    </div>
  </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus est, aliquet nec ornare ac,suscipit at elit. Maecenas sagittis nibh id ultrices gravida. Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim risus, feugiat nec lacus ut, congue dapibus mauris.

Top Align


  <section class="s-grid">
    <div class="s-block s-grid">
      <div class="s-block s-wrapper">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.Sed lacus est, aliquet nec ornare ac,suscipit
          at elit. Maecenas sagittis nibh id ultrices gravida.
          Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim
          risus, feugiat nec lacus ut, congue dapibus mauris.
      </div>
      <div class="s-block align-center">Align Center</div>
    </div>
  </div>

Center


  <section class="s-grid">
    <div class="s-block s-grid">
      <div class="s-block s-wrapper">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.Sed lacus est, aliquet nec ornare ac,suscipit
          at elit. Maecenas sagittis nibh id ultrices gravida.
          Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim
          risus, feugiat nec lacus ut, congue dapibus mauris.
      </div>
      <div class="s-block align-bottom">Align Bottom</div>
    </div>
  </div>

Auto


  <section class="s-grid">
    <div class="s-block s-grid">
      <div class="s-block align-top">Align top</div>
      <div class="s-block align-center">Align Center</div>
      <div class="s-block s-wrapper">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit.Sed lacus est, aliquet nec ornare ac,suscipit
          at elit. Maecenas sagittis nibh id ultrices gravida.
          Ut sed nibh ex. Etiam a viverra nulla.Maecenas enim
          risus, feugiat nec lacus ut, congue dapibus mauris.
      </div>
      <div class="s-block align-bottom">Align Bottom</div>
    </div>
  </div>

Top

Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed lacus est, aliquet nec ornare ac,suscipit at elit. Maecenas sagittis nibh id ultrices gravida.

Bottom

Grid Gutters


  <section class="s-grid s-block center sm-gutter">
    <div class="s-block">
      <div class="s-wrapper">1/2</div>
    </div>
    <div class="s-block">
      <div class="s-wrapper">1/2</div>
    </div>
  </div>

1/2

Articles Preview Grid

Lorem Title
Donec malesuada fermentum maximus. Nam scelerisque lobortis luctus. Sed a dui diam.


  <section class="full-width s-picture-Grid wrap">
    <figure class="s-picture-block s-grid direction-column">
      <img src="http://loremflickr.com/1920/1080" alt="" class="image s-picture-block">
      <figcaption class="s-block">
        <h2> Lorem Title</h2>
        <p>Donec malesuada fermentum maximus. Nam scelerisque lobortis luctus. Sed a dui diam.</p>
      </figcaption>
    </div>
  </section>