本文介绍了Css网格列可以考虑跨多列的项的最小宽度吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
采用以下网格：
.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>
现在考虑
.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网格列可以考虑跨多列的项的最小宽度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！