A Pen by zessx.

<!-- Extract from https://blog.smarchal.com/24ss -->

<header>

  <h1><a href="https://smarchal.com/24ss/"><img src="https://smarchal.com/24ss/assets/logo-white.png" alt="24SSgrid" height="150" /></a></h1>

  <h2>A 24-col solid grid for SASS</h2>

</header>

​

<section id="example">

  <div class="container">

​

    <!-- code -->

    <div class="row debug">

​

      <h2>Basic usage</h2>

​

      <div class="col col-12"></div>

      <div class="col col-12"></div>

​

      <div class="col col-6"></div>

      <div class="col col-6"></div>

      <div class="col col-6"></div>

      <div class="col col-6"></div>

​

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

​

      <div class="col col-4"></div>

      <div class="col col-4"></div>

      <div class="col col-4"></div>

      <div class="col col-4"></div>

      <div class="col col-4"></div>

      <div class="col col-4"></div>

​

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

      <div class="col col-3"></div>

​

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

      <div class="col col-2"></div>

​

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

      <div class="col col-1"></div>

​

      <p class="cf">&nbsp;</p>

      <h2>Offsets</h2>

​

      <div class="col col-12 offset-6 clear"></div>

​

      <div class="col col-8 offset-4"></div>

      <div class="col col-8 clear"></div>

​

      <div class="col col-4 offset-1"></div>

      <div class="col col-4 offset-2"></div>

      <div class="col col-4 offset-2"></div>

      <div class="col col-4 offset-2 clear"></div>

​

      <p class="cf">&nbsp;</p>

      <h2>Nested columns</h2>

​

      <div class="col col-6"></div>

      <div class="col col-18">

        <div class="col col-6"></div>

        <div class="col col-6"></div>

        <div class="col col-6"></div>

      </div>

​

      <div class="col col-6"></div>

      <div class="col col-12">

        <div class="col col-4"></div>

        <div class="col col-4"></div>

        <div class="col col-4"></div>

      </div>

      <div class="col col-6"></div>

​

      <div class="col col-6"></div>

      <div class="col col-12">

        <div class="col col-4">

          <div class="col col-2"></div>

          <div class="col col-2"></div>

        </div>

        <div class="col col-4">

          <div class="col col-1"></div>

          <div class="col col-2"></div>

          <div class="col col-1"></div>

        </div>

        <div class="col col-4">

          <div class="col col-1"></div>

          <div class="col col-1"></div>

          <div class="col col-1"></div>

          <div class="col col-1"></div>

        </div>

      </div>

      <div class="col col-6"></div>

​

      <p class="cf">&nbsp;</p>

      <h2>Nested columns + offsets</h2>

​

      <div class="col col-6"></div>

      <div class="col col-12">

        <div class="col col-8 offset-2"></div>

      </div>

      <div class="col col-6"></div>

​

      <div class="col col-24">

        <div class="col col-12 offset-6">

          <div class="col col-1 offset-1"></div>

          <div class="col col-6 offset-1">

            <div class="col col-2 offset-1"></div>

            <div class="col col-2"></div>

          </div>

          <div class="col col-1 offset-1"></div>

        </div>

      </div>

​

      <div class="col col-4 offset-1">

        <div class="col col-1"></div>

      </div>

      <div class="col col-4 offset-2">

        <div class="col col-1 offset-1"></div>

      </div>

      <div class="col col-4 offset-2">

        <div class="col col-1 offset-2"></div>

      </div>

      <div class="col col-4 offset-2">

        <div class="col col-1 offset-3"></div>

      </div>

​

    </div>

​

  </div>

</section>