隐式网格、可重复布局模式和悬挂元素

Dave Rupert 使用一些现代 CSS 魔法 来解决一个经典难题：当组件的 CSS 无法处理我们传递给它的内容时会发生什么？

具体情况是，当布局网格期望偶数个项目，但实际上提供的是奇数个项目时。我们会得到一个末尾的“悬挂”元素，从而打乱布局。听起来需要一些 防御性 CSS，而 Dave 就实现了这一点。

他使用 :has() 来编写一个巧妙的选择器，用于查找包含奇数个项目的网格中的最后一个项目。

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

分解一下

• 我们有一个名为 .items 的父容器。
• 如果该容器 :has() 一个 .item 子元素，并且该子元素是其类型的最后一个元素，
• …并且该 .item 恰好是奇数个实例，
• …那么选择该类型中的第一个 .item 元素并对其进行样式设置！

在这种情况下，最后一个 .item 可以设置为全宽，以防止布局出现空隙。

如果…那么… CSS 具有条件逻辑功能！目前我们只讨论对 Safari TP 和 Edge/Chrome Canary 的支持，但这非常棒。

碰巧的是，Temani Afif 最近分享了他 在试验隐式网格时 学到的一些技巧。通过利用 CSS Grid 的自动放置算法，我们甚至不必显式声明网格的固定列数和行数——如果需要，CSS 会为我们创建它们！

不，Temani 的技巧并不是 Dave 的“悬挂”难题的替代解决方案。但是，将 Temani 的可重复网格布局模式方法与 Dave 对 :has() 的防御性 CSS 使用相结合，我们可以得到一个功能强大且外观复杂的网格，该网格轻量级且能够处理任意数量的项目，同时保持平衡的可重复模式。