CSSグリッドとjQueryを使って、レスポンシブな升目（正方形のグリッド）をつくる。
デモページを表示
CSS
補足
- CSSグリッドのコンテナになる要素に、data-columns（列数） と data-rows（行数） 属性をつけることで、jQueryの処理対象になる。
- レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。
jQuery
補足
- CSSグリッドのコンテナ要素に指定された列数・行数を取得し、コンテナの幅からコンテナの高さを設定している。
- グリッドの大きさは、grid-template-columns と grid-template-rows プロパティに列数と行数を設定することで決まる。
- グリッドのサイズをピクセル単位で直接指定していないので、きれいに割り切れない場合、完全な正方形にはならない。
- グリッドの間隔は コンテナ要素に data-gap 属性を指定することで、CSSグリッドの gap プロパティが設定される。
- デモページで使用している jQuery のバージョンは 1.12.4 。
HTML
補足
- CSSグリッドのコンテナ要素に data-columns（列数） と data-rows（行数）属性を指定する。必要であれば、data-gap 属性でグリッドの間隔を "単位付き" で指定する。