CSS Gridで作られたコンポーネントの列数と行数を知りたい
公開：
更新：
タイトルどおりなんですが、repeat(auto-fill, ...)またはrepeat (auto-fit, ...)が使われているCSS Gridのコンポーネントの、現在の列数（カラム数）と行数（ロウ数）をJavaScriptから知る方法についてです。
ただし、すべてのグリッドアイテムは1セル分の大きさであるという前提条件があります。
はじめはグリッドコンテナーのサイズと、グリッドアイテムのサイズを調べて計算しないといけないのかと考えていましたが、検索したらシンプルな解決法を見つけました。
やはり同様の要望を持つ人はいるようで、StackOverflowで質問されており、その回答が分かりやすいものでした。
html - How to get count of rows and columns in javascript for flexbox and grid layout? - Stack Overflow The questions is al little bit older but in case anybody needs this: If you are working with CSS-Grid you don't need so much calculation. You can get the current template settings e.g. with in modern Browsers this returns the actual values, not the values from your css, so you get a string like you can than calculate the current number of rows by splitting the string and counting the elements in the resulting array. This might work in older IEs as well, I did not test it.getComputedStyle(container).getPropertyValue("grid-template-rows")250px 250px 250px
自動的に列数が変更されるグリッドでも、上記コードを使えば行のサイズ一覧をテキストで得られる（同様に列数も取れる）ので、複雑な計算は必要ないとのことです。
これならシンプルな解決ができそうに見えますので、デモを作って試しました。
列数を取得するコードは、最初は次のような処理をしていました。
const raw = getComputedStyle(element).getPropertyValue("grid-template-columns");
const count = raw.split(" ").length;試して分かりましたが、auto-fillの場合はこれでうまくいきます。1行になって右側に空白ができてもアイテム幅はちゃんとデータとして取得されます。
しかし、auto-fitの場合、空白を埋める場合に0pxの幅が追加されていきます。これはデモの「スタイル値」を見ると分かるでしょう。結果、見た目の列数と異なった結果を得てしまいます。
これを回避するには、0pxの幅を取り除いてから数えるしかないでしょう。
const raw = getComputedStyle(element).getPropertyValue("grid-template-columns");
const count = raw.split(" ").filter(w => w !== "0px").length;こんな感じです。
これで見た目と同じ列数を取得できました。