CSS グリッドがメーソンリー レイアウトに不十分な理由

石積みレイアウトを実装するための使いやすい方法は、Web 開発者コミュニティによって長い間求められてきました。 Pinterest と関連デザインのおかげで、CSS のみを使用してこのような美しくダイナミックなグリッドを作成することは困難でした。 Chrome チームは、CSS グリッド レイアウト仕様に石積み機能を追加することを求める最近の推奨事項にもかかわらず、この戦略が最善の戦略ではない可能性があると主張しています。ここでは、石積みが独自のレイアウト技術を持つべきであると考える理由と、開発者にとっての潜在的な利点をいくつか紹介します。

CSS グリッドに石材を追加することに反対する理由

1.パフォーマンスに関する懸念

CSS グリッド レイアウトと石積みレイアウトは、アイテムの配置を根本的に異なる方法で処理します。

• CSS グリッド: すべてのアイテムはレイアウトの前に配置されるため、ブラウザーは正確なトラック サイズと配置を計算できます。
• 石積み: アイテムはレイアウトどおりに配置されるため、動的計算が必要となり、固定トラック サイズと固有トラック サイズを混在させると重大なパフォーマンスの問題が発生する可能性があります。

grid-template-columns: 200px auto 200px のような混合トラック定義を持つグリッドを考えてみましょう。石積みの場合、ブラウザはすべての項目をあらゆる構成で事前にレイアウトする必要があり、大規模なグリッドでは指数関数的な複雑さが生じます。これは、サブグリッドなどの高度な機能を使用する場合に特に問題になります。

このような固有の制限を伴うレイアウト方法の出荷を回避するために、石材を CSS グリッドから分離するソリューションを提案します。

2.仕様の複雑さ

石材をグリッド仕様に統合すると、コンテキストのフォーマット設定の中心原則と矛盾する不一致が生じます。

• 配置プロパティ: グリッドは 6 つの配置プロパティをサポートしますが、石積みではフレックスボックスなどのサブセットのみが使用されます。
• 配置プロパティ: グリッドには 4 つの配置プロパティ (グリッド-柱-開始など) がありますが、石積みには 2 つだけ必要です。
• トラックのサイズ設定: グリッド テンプレート列のような特定のパターン:repeat(auto-fill, max-content) は石積みでは意味がありますが、グリッドでは無効のままにしておく必要があります。

これらの矛盾が生じると、どの機能がどのコンテキストで機能するかを覚えておく必要があるため、開発者の認知的負荷が増加します。この断片化により、混乱やエラーが発生する可能性があります。

提案: 別個のレイアウト方法としての石積み

石材を CSS グリッドとバンドルする代わりに、display: masonry を使用してスタンドアロンのレイアウト方法として定義することを推奨します。このアプローチでは、開発者が好むグリッドの柔軟性をすべて維持しながら、上で概説した落とし穴を回避します。

例

クラシックな石積みレイアウト

同じサイズの柱を使用した単純な石積みのレイアウトは、次の方法で実現できます。

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

混合トラックサイズ

狭い列と広い列が交互にあるレイアウトの場合:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

トラックの自動サイズ調整

コンテンツに基づいてトラックの自動サイズ調整を許可します:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

スパンと配置

アイテムが複数のトラックにまたがるようにします:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

別個の組積造レイアウトの利点

明確さ: 開発者は、CSS グリッドの互換性の微妙な違いを気にすることなくメーソンリーを使用できます。

柔軟性: 新しい制約を導入することなく、すべてのグリッド状の機能を引き続き使用できます。

将来性: 専用のメーソンリー仕様により、ブラウザ間で一貫した動作が保証され、不必要な複雑さが回避されます。

以上がCSS グリッドがメーソンリー レイアウトに不十分な理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。