`display: grid`で、親の横幅をベースにしてグリッドを正方形にしたい

Question

質問内容

display: gridを用いて正方形のグリッド群を作成したいです。
このとき、親要素の横幅をベースに計算して正方形グリッドを作成するためにはどうしたらよいでしょうか。
なお、グリッド内の要素は後から挿入するため、最初にgrid-template-rowsを使って領域を確保しておきたい。

再現環境

https://codepen.io/anon/pen/RELJvB

親要素が300px600px、この場合は100px100pxのグリッド群にしたい。

コード(再現環境に同じ)

これだと(当たり前だが)縦が600pxをベースに計算するのでダメ。

.parent {
  width : 300px;
  height: 600px;
}
.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(3, calc(100% / 3));
  grid-template-rows: repeat(3, calc(100% / 3)); 
}

<div class="parent">
  <div class="container">
    <div style="background-color: gray">a</div>
    <div style="background-color: black">a</div>
    <div style="background-color: gray"></div>
    <div style="background-color: black"></div>
    <div style="background-color: gray"></div>
    <div style="background-color: black"></div>
    <div style="background-color: gray"></div>
    <div style="background-color: black"></div>
    <div style="background-color: gray"></div>
  </div>
</div>

試したこと

• vwはビューポート単位になるのでだめ
• --valueなどでCSS変数を使おうとしたが、うまくいかなかった

Answer 1

できなそうだったので、あきらめてJavaScriptで調整することにしました。
「こうやればCSSだけでもできるよ！」という方いらしたら、改めてコメントください。

https://codepen.io/anon/pen/qLPzbx

<div class="parent">
  <div id="container" class="container">
    <div style="background-color: gray">a</div>
    <div style="background-color: black">a</div>
    <div style="background-color: gray"></div>
    <div style="background-color: black"></div>
    <div style="background-color: gray"></div>
    <div style="background-color: black"></div>
    <div style="background-color: gray"></div>
    <div style="background-color: black"></div>
    <div style="background-color: gray"></div>
  </div>
</div>

.parent {
  width : 300px;
  height: 600px;
}
.container {
  display: grid;
  width: 100%;
  height: 100%;
/*   grid-template-columns: repeat(3, calc(100% / 3));
  grid-template-rows: repeat(3, calc(100% / 3));  */
}

const container = document.getElementById("container");
const gridSide = container.clientWidth /3;
container.style.gridTemplateColumns = `repeat(3, ${gridSide}px)`;
container.style.gridTemplateRows = `repeat(3, ${gridSide}px)`;

Comments

[s8_chu]

コメント失礼します。

質問文にも書いてある CSS 変数を利用することで、質問者さんが実現したいことが CSS だけで可能だと思います。
https://codepen.io/anon/pen/OrxeaV

または、正方形のサイズが 100 px とわかっているので、`grid-template-rows`プロパティに設定する`calc`関数の結果が 100 px となるように式を調整をすることでも可能だと思います。
https://codepen.io/anon/pen/KbXjrW

[退会済みユーザー]

コメントありがとうございます。

言葉足らずでしたが、ペアレントは任意で設定できないものです。
また、この例では300pxにしていますが、実際はインタラクティブに指定したいということです。

[s8_chu]

> 実際はインタラクティブに指定したい

であれば、「現状の HTML と CSS Grid Layout を使う」という制約の中で実現することは不可能だと思います。
もし、HTML の構造を変更しても良いのであれば、以下のように行えると思います。
https://codepen.io/anon/pen/bOYqoR