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