不要在设计系统网格示例中使用空内容或低内容

前几天 Dave 和我在 ShopTalk 上邀请了 Jen Simmons。Jen 在谈论 内在网页设计，以及其中一个核心原则就是网格具有行和列，它们不一定会以相同的速率变化，或者本质上具有不同的行为规则。

例如，采用以下（人为的）网格设置

.grid {
  display: grid;
  grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
}

这些列中的每一列都会表现不同。

我正在努力理解这一点，并且肯定没有完全理解它。根据“强度”（我想？）从 1 到 4 对宽度进行编号，它似乎是这样的。

.grid {
  display: grid;
  grid-template-columns: 
    1fr                  /* #4 - Weakest, will fill remaining space */
    minmax(50px, 100px)  /* #3 - Will only start changing when other columns force it */
    20%                  /* #1 - Definite size, steady */
    auto                 /* #2 - Indefinite size, entirely based on content, pushy */
  ;
}

这与我们过去设置网格列的相当长的历史大不相同。基于浮动网格通常使用百分比（明确的尺寸）来设置列。基于内联块的网格也是如此，通常也是如此。

即使使用网格，如果您使用所有百分比或所有分数单位设置所有列，您可能也会得到一个稳定的网格，其中内部内容不会影响大小。但 Jen 说，有趣的是，有一个网格让内容决定其大小的方式。拥抱它。在我看来很有趣。

但无论如何，假设您正在设置一个网格，该网格使用混合的值来设置列宽，例如这样。不要在完全空的列上使用这种方法，否则，您将对这些列的行为产生错误的认识。

看看这个演示，这四个网格具有完全相同的设置，唯一的不同是每列中的文本量。

查看笔 不同列宽值的不同折叠率 由 Chris Coyier (@chriscoyier) 在 CodePen 上。

又酷又奇怪。