CSS 网格 - 如何在“自动”列中均匀分布列宽？ [复制]答案

【问题标题】：CSS grid - How do you evenly distribute column width across "auto" columns? [duplicate]CSS 网格 - 如何在“自动”列中均匀分布列宽？ [复制]
【发布时间】：2020-03-22 21:55:25
【问题描述】：

假设我有这个布局：

.grid {
  display: grid;
  grid-template: auto / auto 64px 80px 64px auto;
  height: 100%;
  width: 100%;
}

<div class='grid'>
  <div style="background-color: red">This is a test. How do I make it symmetrical?</div>
  <div style="background-color: green"></div>
  <div style="background-color: yellow"></div>
  <div style="background-color: blue"></div>
  <div style="background-color: pink"></div>
</div>

我想强制布局是对称的，不管内容如何，我该怎么做？

编辑

这不是重复的（尽管乍一看）：

How is "grid-template-rows: auto auto 1fr auto" interpreted?

是关于如何 1fr 和 auto 工作

CSS Grid - can you constrain auto column?

是关于自动列的图像溢出。

这个问题是关于如何使一个简单的布局对称。

【问题讨论】：

是关于 1fr 和 auto 是如何工作的 --> 如果你有这些信息，那么你可以使用 1fr 进行对称布局并使列相等
@TemaniAfif 是的，但它没有出现在我的搜索中（因为这是一个不同框架的问题！）
是的，但没有出现在我的搜索中 --> 这不是问题，你没有找到，但我找到了，所以我将其作为重复项关闭.关闭一个重复的问题并不是一件坏的事情。你的问题可以知道给那些重复的目标带来更多的搜索。
@TemaniAfif 谢谢 - 在我看来这是一个不同的问题，但让我们同意不同。

标签： html css css-grid

【解决方案1】：

答案是使用1fr 而不是auto！

.grid {
        display:grid;
        grid-template: auto / 1fr 64px 80px 64px 1fr;
        height: 100%;
        width: 100%;
        }

<div class='grid'>
  <div style="background-color: red">This is a test. How do I make it symmetrical?</div>
  <div style="background-color: green"></div>
  <div style="background-color: yellow"></div>
  <div style="background-color: blue"></div>
  <div style="background-color: pink"></div>
</div>

【讨论】：

更确切地说应该是minmax(0,1fr)
@TemaniAfif，谢谢 - 为什么不作为答案发布，并附上解释......