Dave Rupert用一些现代的CSS魔法来解决那些经典的难题之一：当组件的CSS无法处理我们扔给它的内容时会发生什么？
具体的情况是，当一个布局网格希望有偶数的项目，但却被提供了一个奇数的项目。我们就会在最后留下一个 "悬空 "的元素，从而破坏了布局。听起来需要的是一些防御性的CSS，戴夫做到了。
他利用: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的防御性CSS使用:has() ，我们可以得到一个相当强大的、看起来很复杂的网格，它是轻量级的，能够处理任何数量的项目，同时保持一个平衡的、可重复的模式。
