概要
FlexboxやGridレイアウトで横並びに要素を配置しており、画面幅に応じてカラム数が変更する場合に使用できる便利なCSSのカスタムプロパティ(変数)の使い方を紹介。用途・要件
- CSS変数を利用する事で、繰り返し長い記述を書かずに済む。
- 隙間はgapプロパティで調整する。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
注意事項
- IE11には対応しておりません。
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。(トラブルシューティングページへ)