Question

采取以下网格：

.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作为最大值而不是最小值）。

这是一个说明此行为的codepen。看看灰色框如何以较小的屏幕尺寸逃脱它的容器！

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

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

Answer 1

好吧，看来答案是：没有。

Answer 2

你试过吗

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

CSS网格列是否可以考虑跨越多列的项目的最小宽度？

2 个答案: