私は、非常にシンプルなレイアウトのページに取り組んでいます。基本的にはデータ テーブルですが、グリッド レイアウトを使用して、コンテンツのサイズに応じて列が適切に調整されるようにしています。行を並べ替え可能にしたいので (jQuery を使用)、同じ行のすべてのセルをコンテナーにラップする方法を見つける必要があります。
display: subgrid;
サブグリッドの使用を試みたのですが、現時点ではあまりサポートされていないようです。明らかに、グリッドをネストするだけでは、異なるグリッド間で列のサイズが同期されないため機能しません。
それを実現する方法について何かアイデアはありますか?
これまでの私のペンは次のとおりです。https://codepen.io/anon/pen/PEjqgx
ベストアンサー1
文脈に応じて、display: contentsは、実行可能な回避策となる可能性がありますdisplay: subgrid。
から使ってもいいですか: (太字は筆者)
display: contents要素自体は無視され、要素の子要素が要素の親要素の直接の子要素であるかのように表示されます。これは、CSSグリッドを使用するときにラッパー要素を無視する必要がある場合に役立ちます。または同様のレイアウト手法。
ここでの大きな利点は、各行のデータをグループ化する現在のマークアップを維持しながら、各行のコンポーネントが 1 つの CSS グリッド (グリッド コンテナー) の一部であるため、それらのコンポーネントを同期させることができることです。
に関してブラウザのサポート: display: contentsChrome、Firefox、iOS 11.4 以降でサポートされています。
display: contentsそれで、OP のサンプル Codepen に戻って、次の方法で目的の結果を実装するために利用できます。
1) グリッドコンテナのプロパティをglobalWrapper divに移動し、
#globalWrapper {
display: grid;
grid-template-columns: 1fr 1fr max-content;
grid-gap: 3px;
}
2) rowWrapper divを設定するdisplay: contents
.rowWrapper {
display: contents;
}