隐式网格，可重复的布局模式和悬挂

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中文网其他相关文章！