60 Columns Grid System based on CSS Grid Layout

CSS 2/3, 60gs
Snippet by Anon
33 0
  <div class="grid">
        <div class="col-60 center title">
        <div class="col-60 center">
            <h1> 60 Columns Grid System </h1>
            <p>Experimental CSS Grid Layout.</p>

        <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 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">

        No joke, It is just one CSS class:

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

        This is it! Everything else is optional.

        <div class="styling col-30">

        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.



        <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>




{} CSS Resources