問題タブ [css-grid]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - SCSS を使用した名前付き CSS グリッド線
codepen.ioの新しいCSS Grid Layout システムを試しています。列と行の間のグリッド線にカスタム名を定義できる、名前付きグリッド線と呼ばれる興味深い機能があります。残念ながら、SCSS が構文を承認していないため、機能を動作させることができないようです。[line-name]
上記のコードは、両側に幅 100 ピクセルの列が 2 つあり、中央に要素の幅の残りを埋める列がある CSS グリッドを作成する必要があります。この部分は正常に動作します。次に、グリッド線にカスタム名を付けて.one要素を中央の列に配置しようとしましたが、Codepen の SCSS プリプロセッサ (および私が試した他のすべてのコンパイラ) は、すべてをコンパイルすることを拒否し、次のように述べています。Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."
SCSS がこのスタイルを解析せずにそのままコンパイルする (またはコンパイルする別の方法で表現する) ようにする方法はありますか? それとも、通常の CSS で実験を書き直す必要がありますか?
css - CSS グリッド: 空きスペースを使用するが、大きくなるとスクロールするコンテンツ
私は初めてCSS グリッド レイアウトを使用しましたが、それらは素晴らしいものです。ただし、現在、グリッド セルの 1 つを制御するのに問題があります。
私が欲しいのは、既存の空きスペースを占有し、コンテンツが大きくなりすぎたときにスクロールしない要素を持つことです。私の理解では、1fr他のすべてが計算された後、グリッドサイズは利用可能なスペースの均一な量を占めるということです。などのさまざまなサイズを試しましminmax(auto, 1fr)たが、役に立ちませんでした-1fr私が望むものではないコンテンツに合わせて拡張するようです. 100pxグリッド内の他の要素によってサイズを決定したいので、最大サイズ size のような設定も良くありません。
次に例を示します。
「問題のある子」を拡大するのではなくオーバーフローでスクロールさせるために、どのグリッド宣言を使用できますか?