60GS

60GSは60と言う数値を元にCSS Gridベースで設計された軽量なCSSグリッドシステムです。CSS Gridベースで、基本的には以下の1classのみを必須としています。

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

60列用意したのは、60が2、3、4、5、6のどれでも割り切れる数だからだそうです。これでグリッドレイアウトに必要なコードは揃ったのであとは必要に応じてボックスと以下のようなclassを用意し、利用すればかなり軽量で済む、という思考での設計みたいです。

.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 */

例えば1＋4カラムなら、以下のようなclassを加えればいいそうです。

.col-50 { grid-column-end: span 50 } /* 1 + 4 columns */

同じ要領で12カラムなら以下を加えます。

.col-5 { grid-column-end: span 5 }

実験的な試みだそうですが、グリッドシステムとしてはなかなか面白いアイデアですね。ライセンスはMITとの事。

60GS