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との事。