問題タブ [css-grid]

CSS ワーキング グループのメンバーである Rachel Andrews は、カンファレンス ビデオで、Sass は新しい CSS グリッド仕様と互換性があると述べました。それで、Sassのグリッドテンプレートエリアに「ASCIIアート」を配置するための構文を知っている人はいますか? それ以来、Sass のドキュメントを確認しましたが、(まだ) 何も見つかりませんでした。私が得るエラーには、間隔が含まれています。コミュニティ内のポインタに感謝します。そうでない場合は、それまで .css に戻ります (: ありがとう...

次のスニペットを検討してください。

最終結果は、すべての行の各項目がその列の最も広い項目の幅である表のような表示になります。

これは素晴らしいことですが、テーブルを行としてレイアウトする必要があります...

display: tableこれを解決しますが、テーブルには間隔、配置などにいくつかの欠点があります。したがって、グリッドとフレックスは魅力的に見えます。

残念ながら、情報を希望どおりにレイアウトする方法がわかりません。

display: gridtoを追加.rowすると、情報の順序が整いますが、同じ列幅は保持されません。

アイテムのコンテンツはさまざまであるため、固定幅を使用することはできず、グリッド/フレックスがページ全体/含まれる幅にまたがることは望ましくありません。

メディア クエリを使用せずに CSS グリッド ラップを作成することは可能ですか?

私の場合、グリッドに配置したい非決定的な数のアイテムがあり、そのグリッドをラップしたいです。Flexbox を使用すると、物事を確実に適切に配置することができません。たくさんのメディアクエリも避けたいです。

サンプルコードは次のとおりです。

そして、ここにGIF画像があります：

補足として、私のようにすべてのアイテムの幅を指定しないようにする方法を誰かに教えてもらえれば、grid-template-columnsそれは素晴らしいことです。子供たちが自分の幅を指定することをお勧めします。