CSS 网格装订线导致列溢出，如何强制列宽一致

Question

我正在尝试创建一个相当简单的 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: repeat(12, minmax(0, 1fr));
  -webkit-column-gap: 2rem;
  column-gap: 2rem;
  grid-column-end: span 12;
}

.grid .grid {
  -webkit-column-gap: 2rem;
  column-gap: 2rem;
}

.grid .col-1 {
  grid-column-end: span 1;
}

.grid .col-2 {
  grid-column-end: span 2;
}

.grid .col-3 {
  grid-column-end: span 3;
}

.grid .col-4 {
  grid-column-end: span 4;
}

.grid .col-5 {
  grid-column-end: span 5;
}

.grid .col-6 {
  grid-column-end: span 6;
}

.grid .col-7 {
  grid-column-end: span 7;
}

.grid .col-8 {
  grid-column-end: span 8;
}

.grid .col-9 {
  grid-column-end: span 9;
}

.grid .col-10 {
  grid-column-end: span 10;
}

.grid .col-11 {
  grid-column-end: span 11;
}

.grid .col-12 {
  grid-column-end: span 12;
}

.grid .col-end {
  grid-column-end: -1;
}

.grid .colstart-start {
  grid-column-start: 1;
}

.grid .colstart-2 {
  grid-column-start: 3;
}

.grid .colstart-3 {
  grid-column-start: 4;
}

.grid .colstart-4 {
  grid-column-start: 5;
}

.grid .colstart-5 {
  grid-column-start: 6;
}

.grid .colstart-6 {
  grid-column-start: 7;
}

.grid .colstart-7 {
  grid-column-start: 8;
}

.grid .colstart-8 {
  grid-column-start: 9;
}

.grid .colstart-9 {
  grid-column-start: 10;
}

.grid .colstart-10 {
  grid-column-start: 11;
}

div[class*="col-"] {
  text-align: left;
  background-color: orange;
  font-size: 12px;
  font-family: sans-serif;
}

div[class*="col-"]:before {
  content: attr(class);
  display: inline-block;
  margin: 4px;
}

.container[class*="col-"]:before {
  display: none;
}

div[class*="col-"] div[class*="col-"] {
  background: lightgreen;
}

div[class*="col-"] div[class*="col-"]:after {
  content: " (nested)";
  display: inline-block;
  margin: 4px;
}

.grid {
  row-gap: 1rem;
}

.grid .grid {
  background: green;
}

.grid-breakout {
  background: red;
}

.container {
  -webkit-column-gap: 1rem;
  column-gap: 1rem;
  row-gap: 1rem;
  margin-bottom: 1rem;
}

Answer 1

.main {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}

.one, .two, .three, .four, .five, .six,
.seven, .eight, .nine, .ten, .eleven, .twelve {
    grid-column-end: span 12;
}

.nested {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(12, 1fr);
}

.merge-two-rows { grid-row-end: span 2 }
.merge-three-rows { grid-row-end: span 3 }
.merge-four-rows { grid-row-end: span 4 }
.merge-five-rows { grid-row-end: span 5 }
.merge-six-rows { grid-row-end: span 6 }

@media only screen and (min-width: 481px) {
    .one { grid-column-end: span 1 }
    .two { grid-column-end: span 2 }
    .three { grid-column-end: span 3 }
    .four { grid-column-end: span 4 }
    .five { grid-column-end: span 5 }
    .six { grid-column-end: span 6 }
    .seven { grid-column-end: span 7 }
    .eight { grid-column-end: span 8 }
    .nine { grid-column-end: span 9 }
    .ten { grid-column-end: span 10 }
    .eleven { grid-column-end: span 11 }
}

资源：带嵌套的智能 12 列网格