エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
60という数値を中心に設計された実験的なCSSグリッドシステム・「60GS」
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
60という数値を中心に設計された実験的なCSSグリッドシステム・「60GS」
60GSは60と言う数値を元にCSS Gridベースで設計された軽量なCSSグリッドシステムです。CSS Gridベースで... 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-c