Q&A
ハッシュが全角のようですが、実際のコードではどうなっていますか？
Dsiplay grid を使って表示してる内容をtransformを使って左にスライドした際にDisplay gridの幅を変更し、モニターのサイズが異なる場合でも
Display graidの端をモニターの端に合わせたいと考えています。
Windowスライドボタンをクリックするとcontainerのグリッドはスライドし、もう1回クリックすると元の位置に戻り、Display gridもサイズが変わるところまでは以下でできました。
<style> .container { grid-template-columns: repeat(17, 30px) 1fr; } .show { transform: translate3d(-420px, 0, 0); } ＃wrapper { transition: transform 0.3s; } ＃wrapper.show .container { grid-template-columns: repeat(17, 30px) calc((100vw + 920px) } </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>上記でグリッドがスライドした際のDisplay gridの幅は以下で決まりますが、ノートPCの画面と27”モニターでは右端の位置が異なります。
grid-template-columns: repeat(17, 30px) calc((100vh + 920px))
モニターの大きさが変わっても常にDisplay gridがモニターの右端まで広がるように指定する方法を教えて頂けますか。
よろしくお願いします。
すみません。ハッシュは本来半角ですが、ここに記入するとハッシュのところの行のフォントサイズが大きくなるために全角にしています。
なるほど。
一度teratailのヘルプを読んだ方がいいと思います。
3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7
回答1件
0
ベストアンサー
以下のようにするのはどうでしょうか。
css
1 #wrapper.show .container { 2 width: calc(100% + 420px); 3 /*grid-template-columns: repeat(17, 30px) calc((100vw + 920px)*/ 4 }
投稿2021/05/31 02:24
総合スコア36158
アドバイスありがとうございます。上記で試してみましたが、Display gridの幅が変更されず固定のままとなり、右端に余白ができてしまいます。
当方では余白は発生しませんでした。
↓以下にサンプルを置きます。
https://jsfiddle.net/Lhankor_Mhy/bsj36zc9/
ご提示いただいていない部分に原因があるのかもしれないですね。
100％というのを下記のように入れてみたら余白が消えました。
grid-template-columns: repeat(17, 30px) calc(100% - 90px)
100vwではなく、100％というのがヒントになって解決しました。ありがとうございます。
ご解決されて何よりです。
あなたの回答
tips
プレビュー
