Dave Rupert 拥有一些现代 CSS 魔法 它解决了其中一个经典难题：当组件的 CSS 无法处理我们扔给它的内容时会发生什么？
具体情况是当布局网格需要偶数个项目，但提供的却是奇数。 我们在最后留下了一个“悬空”元素，它会抛出布局。 听起来需要的是一些 防御性 CSS 戴夫做到了。
他伸手去拿 :has() 编写一个漂亮的选择器，它可以嗅出包含奇数项的网格中的最后一项：
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }打破它：
- 我们有一个父容器
.items. - 如果容器
:has()an.item是同类中最后一个的孩子， - …然后
.item恰好是一个奇数实例， - …然后选择第一个
.item那个类型的元素和风格吧！
在这种情况下，最后 .item 可以设置为全宽以防止布局中的孔。
如果……那么…… CSS 具有条件逻辑能力！ 我们目前只讨论对 Safari TP 和 Edge/Chrome Canary 的支持，但这非常棒。
碰巧的是，Temani Afif 最近分享了他在 尝试隐式网格. 通过利用 CSS Grid 的自动放置算法，我们甚至不必为网格显式声明固定数量的列和行——如果需要，CSS 会为我们创建它们！
不，Temani 的技术并不是 Dave 的“悬空”困境的替代解决方案。 但是将 Temani 的可重复网格布局模式方法与 Dave 的防御性 CSS 使用相结合 :has()，我们得到了一个功能强大且外观复杂的网格，它轻巧，能够处理任意数量的项目，同时保持平衡、可重复的模式。
