60 Columns Grid System Experimental CSS Grid Layout.

60 GS is starter kit for the CSS Grid.

1

2

1

2

3

1

2

3

5

1

2

3

4

5

1

2

3

4

5

6

Why 60? Because the number 60 is dividable by 2,3,4,5 and 6.

Lightweight - 1 CSS class

1-60 columns

It can be Fluid or Responsive

No joke, It is just one CSS class: .grid { display: grid; grid-template-columns: repeat(60, 1fr) } This is it! Everything else is optional.

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.

Why do you need this grid system? Bescouse is hard to have 2,3,4,5,6 columns under the same display: grid;

Custom1

Custom2

Custom3