使用 CSS grid 实现类似 Flexbox 的“将元素排成一行”

当我们 讨论 Flexbox 和 gap 时，我突然意识到，有时我们会选择 Flexbox 的原因是，要将一些盒子排成一行，并稍微间隔开。

我的大脑在这种情况仍然会选择 Flexbox，有了 gap，它可能会继续这样做。 不过值得注意的是，grid 可以用它自己的特殊方式做到同样的事情。

就像这样

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
}

它们看起来都一样宽，但这仅仅是因为它们没有内容。 有了内容，您会看到这些盒子会根据内容的自然宽度开始互相挤压。 如果您需要进行一些控制，您可以始终对落入这些列的元素设置 width / min-width / max-width - 或者，使用 grid-template-columns 设置它们，但不要设置实际的列数，然后让 min-content 决定宽度。

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}

灵活网格 最棒。

另一个想法...如果您只希望整个网格本身与内容一样宽（即小于 100% 或自动，如果需要），那么请注意 display: inline-grid; 是一个选择。