CSS GRID -водосточный желоб вызывает переполнение колонн, как мне заставить ширину столбца подчиняться ⇐ CSS

[Anonymous]

Я пытаюсь создать довольно простую сетку CSS с 12 колоннами и разрешить гнездование сетей. < /p>

Код: Выделить всё

.grid {
grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
column-gap: 2rem;
}
< /code>
У меня в настоящее время есть проблема, в которой дробные столбцы выталкиваются из вложенного контейнера сетки при увеличении ширины желоба, независимо от того, какой контент находится в нем.  Я знаю, что это потому, что ширина желобов составляет больше, чем контент, но есть ли способ заставить его спустить без использования свойства переполнения? src="https://i.sstatic.net/Yi2zK.png" />
...when columns should accommodate gutter instead:
[img]https://i.sstatic.net/AfmfE.png[/img]
 < /p>
codepen < /p>


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;
}< /code>














This is what I would want to happen...

Подробнее здесь: https://stackoverflow.com/questions/594 ... lumn-width