グリッドレイアウトをスライドした際にグリッドの幅定義も変更したい

Question

Dsiplay grid　を使って表示してる内容をtransformを使って左にスライドした際にDisplay gridの幅を変更したいと考えています。

Windowスライドボタンをクリックするとcontainerのグリッドはスライドし、もう1回クリックすると元の位置に戻るところまでは
以下でできました。

<style> .container { grid-template-columns: repeat(17, 30px) 1fr; } .show { transform: translate3d(-420px, 0, 0); } ＃wrapper { transition: transform 0.3s; } </style> <div id="wrapper" > <section> <div class="container"></div> <img src="slide.svg" id="btn-b" class="thumb-a" alt="Windowスライドボタン"></a></div> </section> </div> <script> $(document).ready(function () { $('#btn-b').on('click', function () { $('#wrapper').toggleClass('show') }); }); </script>

上記でグリッドがスライドした際にcontainerの幅の定義を以下のように変更するにはidのクラスがshowになったときに
その情報をCSS側に渡して定義を変更すればいいと思うのですが、うまいやり方が見つかりません。
grid-template-columns: repeat(17, 30px) calc((100vh + 920px))

JS側の変数をCSSに渡して、その変数を見てCSS側の定義を選択する方法がいいと考えていますが、対応方法を教えて頂けますか。
よろしくお願いします。

Answer 1

#wrapper.show .container {
  grid-template-columns: repeat(17, 30px) calc((100vh + 920px))
}

これじゃだめですか？

Comments

[Emizo1]

できました。ありがとうございます。showの後にスペースを入れることで使い方が変わること理解できました。ありがとうございます。もし、ご存知であれば、教えてください。上記ではgridを広げる幅をcalc((100vh + 920px)で固定にしていますが、モニターの大きさが変わっても常にgridがモニターの右端まで広がるように指定する方法はあるでしょうか。上記ができるようになって違うサイズのモニターで試すと気になってしまいました。よろしくお願いします。

[macaron_xxx]

違う質問なので、別でたててください。

[Emizo1]

そうですね。別の質問とします。