小编Mat*_*rey的帖子
CSS 网格装订线导致列溢出，如何强制列宽一致
我正在尝试创建一个相当简单的 12 列 CSS 网格框架并允许嵌套网格。
.grid {
grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
column-gap: 2rem;
}
我目前遇到的问题是，当增加装订线宽度时，无论其中有什么内容，小数列都会被推出嵌套网格容器。
我尝试在声明列时将 minmax 值设置为 0，但它仍然坚持扩展。我知道这是因为装订线的宽度加起来超过了内容，但是有没有办法在不使用溢出属性的情况下强制它下降？
列被装订线和/或内容推动：
...当列应该容纳装订线时：
.grid {
grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
column-gap: 2rem;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: [left-gutter-start] auto [left-gutter-end] minmax(0, 960px) [main-content-end] auto [right-gutter-end];
overflow-wrap: break-word;
}
.container>.grid {
grid-column-start: left-gutter-end;
grid-column-end: main-content-end;
}
.container>.grid.grid-breakout {
grid-column-start: left-gutter-start;
grid-column-end: right-gutter-end;
}
.grid {
width: 100%;
display: grid;
grid-template-columns: …5
推荐指数
推荐指数
1
解决办法
解决办法
1365
查看次数
查看次数