隱式網格，可重複的佈局模式和懸掛

Dave Rupert巧妙地運用現代CSS解決了經典難題：當組件的CSS無法處理我們提供的內容時會發生什麼？

具體情況是，當佈局網格期望偶數個項目，但實際提供的是奇數個項目時。最後剩下的“懸空”元素會破壞佈局。這需要一些防禦性CSS，Dave做到了。

他使用:has()編寫了一個簡潔的選擇器，用於查找包含奇數個項目的網格中的最後一個項目：

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

分解如下：

• 我們有一個名為.items的父容器。
• 如果該容器:has()一個.item子元素，它是其類型的最後一個，
• ……並且該.item恰好是奇數實例，
• ……那麼選擇該類型的第一個.item元素並設置其樣式！

在這種情況下，最後一個.item可以設置為全寬，以防止佈局出現空隙。

如果……那麼……CSS具有條件邏輯能力！目前我們只討論Safari TP和Edge/Chrome Canary的支持，但這已經非常棒了。

碰巧的是，Temani Afif最近分享了他使用隱式網格進行實驗時學到的技巧。通過利用CSS Grid的自動放置算法，我們甚至不必為網格顯式聲明固定數量的列和行——如果需要，CSS會為我們創建它們！

不，Temani的技巧並不是Dave的“懸空”難題的替代方案。但是，將Temani對可重複網格佈局模式的方法與Dave對:has()的防禦性CSS用法相結合，我們得到了一個功能強大且外觀複雜的網格，它輕量級且能夠處理任意數量的項目，同時保持平衡的可重複模式。

以上是隱式網格，可重複的佈局模式和懸掛的詳細內容。更多資訊請關注PHP中文網其他相關文章！