CSS网格列可以尊重跨越多列的项目的最小宽度吗？答案

【问题标题】：Can CSS grid-columns respect the min-width of an item spanning multiple columns?CSS网格列可以尊重跨越多列的项目的最小宽度吗？
【发布时间】：2018-10-20 20:40:09
【问题描述】：

取下面的格子：

.grid {
    display: grid;
    grid-template-columns: [one] minmax(auto, 1fr) [two] minmax(auto, 1fr);
}

.item {
    grid-column: one;
    min-width: 3rem;
}

<div class="grid">
    <div class="item">Item</div>
</div>

项目的行为符合预期：两列都填充了网格，但随着父项变小，第一列不会小于项目的最小宽度 3rem，而第二列继续折叠为 0 . 一切都好。

现在考虑

.item {
    grid-column: one / span 2;
    min-width: 3rem;
}

现在所有列都折叠为 0。实际上，在这种情况下，'auto' 表示 0（这在规范中并不清楚，其中将 auto 作为最大值而不是最小值）。

这是一个说明此行为的代码笔。看看灰色框是如何在较小的屏幕尺寸下脱离其容器的！

https://codepen.io/anon/pen/RJbMVB?editors=1100

有没有办法让网格尊重跨越多列的项目的最小宽度，同时在网格更大时仍然允许它们使用可用的可用空间进行扩展？或者是当前行为规范（如果是，它在哪里这么说）？

【问题讨论】：

如果你定义一个min-with，这不应该反映在minmax吗？ codepen.io/Paulie-D/pen/ELEvOm?editors=1100
@Paulie_D 如果您要定义最小宽度，minmax(auto, ...) 将使用最小宽度作为它的最小值，至少符合规范w3.org/TR/css-grid-1/#track-sizing
@Paulie_D 哦，我明白了，您说的是第二种情况。我不提前知道这个网格中会有什么内容，所以我不能按照你的建议在父级上设置 min-width。
如果你的子节点的最小宽度将跨越所有列，那不是父节点的最小宽度吗？
@Paulie_D 不是。这是用 50rem 宽度的项目修改的代码笔，以使其清晰。在较小的尺寸下，该项目会逃脱父级。 codepen.io/anon/pen/zjWEZp?editors=1100

标签： css css-grid

【解决方案1】：

好吧，看来答案是：不。

【讨论】：

【解决方案2】：

你试过了吗

minmax(min-content, 1fr)
//    OR
minmax(max-content, 1fr)

【讨论】：

当然。根据规范， minmax(auto, ...) 无论如何都会评估为 minmax(min-content, ...) ，所以它们是同一回事。 Max-content 不是我想要的，但它也不起作用。看这里，灰色框从容器中逃逸codepen.io/anon/pen/zjWEZp?editors=1100