Css网格列可以考虑跨多列的项的最小宽度吗？ [英] Can CSS grid-columns respect the min-width of an item spanning multiple columns?

问题描述

采用以下网格：

.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

有没有办法让网格尊重跨越多列的项的最小宽度，同时仍然允许它们在网格较大时使用可用的空闲空间进行扩展？还是当前的行为符合规范(如果是，它在哪里说明)？

推荐答案

您试过

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

这篇关于Css网格列可以考虑跨多列的项的最小宽度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！