60 Columns Grid System based on CSS Grid Layout

  <div class="grid">
        <div class="col-60 center title">
           60GS 
        </div>
        <div class="col-60 center">
            <h1> 60 Columns Grid System </h1>
            <p>Experimental CSS Grid Layout.</p>
        </div>


        <div class="styling col-60">60 GS is starter kit for the CSS Grid.</div>

        <div class="styling col-30">1</div>
        <div class="styling col-30">2</div>

        <div class="styling col-20">1</div>
        <div class="styling col-20">2</div>
        <div class="styling col-20">3</div>

        <div class="styling col-15">1</div>
        <div class="styling col-15">2</div>
        <div class="styling col-15">3</div>
        <div class="styling col-15">5</div>

        <div class="styling col-12">1</div>
        <div class="styling col-12">2</div>
        <div class="styling col-12">3</div>
        <div class="styling col-12">4</div>
        <div class="styling col-12">5</div>

        <div class="styling col-10">1</div>
        <div class="styling col-10">2</div>
        <div class="styling col-10">3</div>
        <div class="styling col-10">4</div>
        <div class="styling col-10">5</div>
        <div class="styling col-10">6</div>

        <div class="styling col-60">Why 60?
            <p>Because the number 60 is dividable by 2,3,4,5 and 6.</p>
        </div>

        <div class="styling col-20">Lightweight - 1 CSS class</div>
        <div class="styling col-20">1-60 columns</div>
        <div class="styling col-20">It can be Fluid or Responsive</div>

        <div class="styling col-30">
            <pre>

        No joke, It is just one CSS class:

        .grid {
          display: grid;
          grid-template-columns: repeat(60, 1fr)
        }

        This is it! Everything else is optional.
      </pre>

        </div>
        <div class="styling col-30">
            <pre>

        You can some extra features like:

        .col-60 { grid-column-end: span 60 } /* 1 column */
        .col-30 { grid-column-end: span 30 } /* 2 columns */
        .col-20 { grid-column-end: span 20 } /* 3 columns */
        .col-15 { grid-column-end: span 15 } /* 4 columns */
        .col-12 { grid-column-end: span 12 } /* 5 columns */
        .col-10 { grid-column-end: span 10 } /* 6 columns */

        You don't need to use this.

      </pre>

        </div>

        <div class="styling col-60">
            Why do you need this grid system? Bescouse is hard to have 2,3,4,5,6 columns under the same display: grid;</div>

        <div class="styling custom1">Custom1</div>
        <div class="styling custom2">Custom2</div>
        <div class="styling custom3">Custom3</div>

        <div class="styling col-60">
            <a href="#">Footer</a>
        </div>

    </div>