百分比和无限高度下的 CSS Grid 布局变化

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

这是一篇关于 Manuel Rego Casasnovas 做出的一个非常具体的 CSS 更改的精彩且极客的深入探讨。以下是一些我们应该了解的术语

第一个问题是,什么是无限大小?简单来说,确定大小是可以不考虑元素内容而计算的大小。无限大小则相反,为了计算它,您需要先检查内容。

然后继续解释这一切变得多么复杂。简而言之,更改内容如下

对于无限高度网格容器,百分比行轨道和槽将根据固有高度解析,而不是分别被视为自动和零。

Manuel 提供了一个很好的视觉演示

查看示例 [css-grid] 百分比行轨道,作者是 Manuel Rego Casasnovas (@mrego),发布于 CodePen

直链 →