【发布时间】：2018-10-20 23:28:30
【问题描述】：
目标
有一个 CSS 网格容器
有 3 列由 fit-content(33.33%) 计算，以获得相同大小的列
能够通过在单个网格项上使用最小/最大宽度来进一步控制/限制列大小
特别是我想将列的大小从 33% 调整到 50%，以防只有 2 个网格项，使用 min-width。
下面的 sn-p 符合上述目标。
.grid {
width: 780px;
display: grid;
grid-template-columns: repeat(3, fit-content(33.33%));
justify-items: start;
align-items: stretch;
border:1px solid #000;
}
.cell {
min-width:calc(780px / 2);
height:80vh;
background: radial-gradient(
circle,
rgba(63, 94, 251, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
}<div class="grid">
<div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
<div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>问题是我使用了一个明确的值：min-width:calc(780px / 2)。
所以我尝试使用百分比，例如min-width:calc(100% / 2)。但似乎网格项目中的百分比是相对于它自己的宽度而不是 而不是容器的宽度。
所以我尝试了这个：min-width:calc(300% / 2)，认为如果 100% 是 fit-content 1/3 中 1 个网格项的宽度，那么 300% / 2 将是相对于容器的大约 50% 最小宽度宽度。
但是像这样使用百分比会使项目重叠：
.grid {
width: 780px;
display: grid;
grid-template-columns: repeat(3, fit-content(33.33%));
justify-items: start;
align-items: stretch;
border:1px solid #000;
}
.cell {
min-width:calc(300% / 2);
height:80vh;
background: radial-gradient(
circle,
rgba(63, 94, 251, 1) 0%,
rgba(252, 70, 107, 1) 100%
);
}<div class="grid">
<div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
<div class="cell">Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor.</div>
</div>所以我的问题是：是否可以在网格项的最小宽度中使用百分比，相对于容器的宽度？怎么样？
【问题讨论】：
-
在解决方案中使用 CSS Grid 和 min-width 是否是硬性要求？如果您想要的只是一个平均分布 2 或 3 列的容器，那么只需使用 flexbox 即可轻松解决。
-
是的，由于许多其他要求，我需要 CSS 网格和最小宽度（这种情况非常孤立）。我也很好奇百分比在这里是如何工作的，因为它在所有浏览器中都同样奇怪。