ホームページを縦横の格子状に分割して、
要素を配置するグリッドレイアウト。

一つ一つの格子の幅と高さは指定する必要があるのですが、
画面のサイズに合わせてレスポンシブにしたいと思う場面は多々あります。

レスポンシブにする最も単純な方法は%で指定することですが、
画面の縦長・横長に応じて格子も縦長・横長になると不便なこともあります。

horidashiWebを作るときに、
正方形のグリッドを作るのにちょっと苦戦したので、
ここでその方法をまとめておきます。

f:id:u874072e:20200828151043p:plain — 正方形グリッドレイアウト

画面いっぱいに配置する場合はvwが使える
親要素の幅いっぱいに配置する
まとめ

画面いっぱいに配置する場合はvwが使える

まずは、horidashiWebのように画面幅いっぱいを使って、
グリッドレイアウトによる配置を行う場合です。

この場合は、ビューポートの幅に対する比率を指定するvwが使えます。

例えば下のように、
grid-template-columnsでグリッドの列の幅をビューポート幅の10%(10vw)
に指定して、10列分作って埋め尽くします。
grid-auto-rowsでグリッドの行の高さを幅と同じく10vwとして、
正方形グリッドの完成です。

<div id="" 
     style="display:grid; 
            grid-auto-rows:10vw; 
            grid-template-columns:repeat(10,10vw)">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightblue">H</div><div>I</div><div>J</div><div>K</div><div>L</div><div style="grid-row:span 3; grid-column:span 3; background-color: tomato">M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightyellow">S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div><div>Y</div><div>G</div>
</div>

全て同じ大きさだと味気ないので、
いくつかはgrid-row,grid-columnでサイズを変えています。

結果は下のようになります。
ただし、vwはブラウザの幅を基準にした割合になってしまうので、
はてなブログのようにサイドバーや余白などがあると、
突き抜けてしまいます。
そこで、下を表示するために、10vwの変わりに4vwとして微調整してます。

親要素の幅いっぱいに配置する

ブラウザの幅いっぱいに配置する場合はvwでよかったのですが、
上のように、ブログの記事枠に納めようとするとvwは使えません。

それでは、親要素の幅いっぱいに配置するにはどうすれば良いでしょうか。

この場合、cssだけでどうにかする方法はなさそうなので、
javascriptの出番です。

下のコードでは、Nで列の数を指定して、
要素の幅をN分割した長さの正方形で、
グリッドを生成しています。

また、$(window).resizeで、
ウィンドウサイズが変更される度に、
グリッドの間隔を調整するようにしています。

<div id="grid" style="display:grid;">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightblue">H</div><div>I</div><div>J</div><div>K</div><div>L</div><div style="grid-row:span 3; grid-column:span 3; background-color: tomato">M</div><div>N</div><div>O</div><div>P</div><div>Q</div><div>R</div><div style="grid-row:span 2; grid-column:span 2; background-color:lightyellow">S</div><div>T</div><div>U</div><div>V</div><div>W</div><div>X</div><div>Y</div><div>G</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script>
    function adjust_grid(){
        var N = 10
        var size = $("#grid").width()/N
        $("#grid").css({'grid-auto-rows': size,
        'grid-template-columns': `repeat(${N}, ${size}px)`,
        'display':grid})
    }
    adjust_grid()
    $(window).resize(function(){
        adjust_grid()
    })
</script>

これで、下のように、記事欄の幅をいっぱい使って、
正方形を配置できました。

まとめ

レスポンシブに格子の幅と高さの揃えた
正方形のグリッドレイアウトを作る方法を紹介しました。

ブラウザの幅いっぱいを使う場合には、
vwでビューポートの幅を参照すればcssのみでできます。

一方で、記事欄の幅いっぱいに広げるような場合には、
javascriptを使って、要素の幅を取得する必要がありそうです。

クイックノート

ちょっとした発見・アイデアから知識の発掘を

正方形グリッドレイアウトを作りたい

画面いっぱいに配置する場合はvwが使える

親要素の幅いっぱいに配置する

まとめ