cssサブグリッドの代替は何ですか?

12
Buno 2018-01-02 05:37.

私は非常に単純なレイアウト(基本的にはデータテーブル)のページで作業していますが、コンテンツサイズに応じて列が適切に調整されるように、グリッドレイアウトを使用しています。(jQueryを使用して)行を並べ替え可能にしたいので、同じ行のすべてのセルをコンテナーにラップする方法を見つける必要があります。

display: subgrid;

サブグリッドを使用してみましたが、現時点ではあまりサポートされていないようです。明らかに、グリッドをネストするだけでは、異なるグリッド間で列サイズが同期されないため、機能しません。

それを達成する方法について何かアイデアはありますか?

これが私のこれまでのペンです: https://codepen.io/anon/pen/PEjqgx

2 answers

22
Danield 2018-01-02 05:58.

コンテキストによっては、display: contentsの実行可能な回避策になる場合がありますdisplay: subgrid

カニウスから:(太字の鉱山)

display: contents要素自体を無視して、要素の子を要素の親の直接の子であるかのように見せます。これは、CSSグリッドまたは同様のレイアウト手法を使用するときにラッパー要素を無視する必要がある場合に役立ちます。

ここでの大きな利点は、現在のマークアップ(データの各行をグループ化する)を維持しながら、各行のコンポーネントが1つのCSSグリッド(グリッドコンテナー)の一部であるため、同期を維持できることです。

ブラウザのサポートについて:display: contentsChrome、Firefox、iOS11.4以降でサポートされています。

したがって、OPのサンプルCodepenに戻ると、次の方法でdisplay: contents目的の結果を実装するために利用できます。

1)グリッドコンテナのプロパティをglobalWrapperdivに移動して

#globalWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr max-content;
  grid-gap: 3px;
}

2)rowWrapperdivを設定する display: contents

.rowWrapper {
  display: contents;
}

更新されたCodepenデモ

3
ganar 2018-05-08 08:25.

display:contentsサブグリッドの代わりに使用することに注意してください。回避する必要があるのには十分な理由があります。代わりに、コンテナ要素またはFlexで別のグリッドを使用してください。

[Adendum 11/1/2020] FirefoxはV71以降Subgridをサポートしていますが、他のブラウザからはまだ何も言われていません。codropsの機能については良い説明があり、ここでいくつかの例を見ることができます。そして、これは私が使用できるすべてのブラウザで現在のサポートを確認するためのリンクです

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Westworldの遊び方:Amazonエコーのない迷路

Westworldの遊び方:Amazonエコーのない迷路

Westworldの第2シーズンが終わり、次の1、2年は楽しいがやや混乱するシリーズでモーター機能が凍結するので、次に何をすべきかについて少し迷うかもしれません。ビンジウォッチングする別の番組を見つけますか?さらに多くのファン理論を読み直しますか?お気に入りの1990年代のオルタナティブロックソングの楽しいオールドタイムの​​ピアノカバーを書き始めますか?心配しないでください。長い待ち時間が始まる前に、Westworldのヒットをもう1つ得ることができます。

ジャネールモネイは彼女のプライドで周りをファックしませんでしたBETアワードを見てください

ジャネールモネイは彼女のプライドで周りをファックしませんでしたBETアワードを見てください

2018 BETアワードは、日曜日の夜にロサンゼルスで開催されました。プライド月の真ん中に軽くたたきます。見た目はいたるところに強かったが、ジャネール・モネイのように誰もそれをしなかった。

リットウッドで2000年代と2010年代の車を祝うために2038年に会いましょう

リットウッドで2000年代と2010年代の車を祝うために2038年に会いましょう

他の期間をテーマにした自動車展示会、特に1980年代と90年代の自動車ショーRadwoodの最近の成功に続いて、私は2000年代と2010年代の自動車文化を祝う自動車ショーであるLitwoodを立ち上げることにしました。私は今これについてディブを呼んでいます。

リチャードは堅実なシリコンバレーで彼の会社の将来のためにビットコインを裏返します

リチャードは堅実なシリコンバレーで彼の会社の将来のためにビットコインを裏返します

数週間前のシリコンバレーの第5シーズンのプレミアのレビューで、ショーはその高齢で問題を抱え続けていますが、才能のあるキャストとそのひねくれたユーモアのセンスを備えた頑丈な基盤からまだ機能していると主張しました。そして、シーズンの終わりに近づくにつれて、その点は持ちこたえてきました。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language