暗黙のグリッド、再現可能なレイアウトパターン、およびダングラー

Dave Rupertは、現代のCSSを使用して古典的なパズルを解決します。コンポーネントのCSSが私たちが提供するものを処理できない場合はどうなりますか？

具体的には、レイアウトグリッドが偶数のアイテムを期待しているが、実際には奇数のアイテムを提供する場合。最後に残っている「空腹」要素がレイアウトを破壊します。これにはいくつかの防御的なCSSが必要です、デイブはそれをしました。

彼は以下を使用して簡潔なセレクターを書きました。

 <code>.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }</code>

次のように分解：

• .itemsと呼ばれる親コンテナがあります。
• コンテナの場合：has（）a .item child element、それはそのタイプの最後です、
• ...そして.itemはたまたま奇妙なインスタンスです、
• ...次に、そのタイプの最初の.item要素を選択し、スタイルをスタイルします！

この場合、最後の.itemを全幅に設定して、レイアウトにボイドが存在するのを防ぐことができます。

if ... then ... CSSには条件付きロジック機能があります！現在、私たちはSafari TPとEdge/Chrome Canaryのサポートについてのみ話していますが、これはすでに素晴らしいことです。

Temani Afifは最近、暗黙のメッシュを使用して実験するときに学んだヒントを共有したことがあります。 CSSグリッドの自動配置アルゴリズムを活用することにより、グリッドの固定数の列と行を明示的に宣言する必要さえありません-CSSは、必要に応じてそれらを作成します！

いいえ、テマニのトリックは、デイブの「空腹」パズルに代わるものではありません。ただし、繰り返し可能なメッシュレイアウトモードへのTemaniのアプローチとDaveの防御的なCSS使用量を組み合わせると、has（）は、バランスの取れたリピート可能なモードを維持しながら、任意の数のアイテムを処理できる強力で複雑な外観のメッシュを取得します。

以上が暗黙のグリッド、再現可能なレイアウトパターン、およびダングラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。