Используйте JavaScript, чтобы вынуть третье поле и поместить его помимо исходного контейнера сетки, если вы не можете сделать это заранее.
ли сделать интервал элемента сетки от первой до последней строки, если я не знаю количество строк?
Допустим, у меня есть следующий HTML с неизвестным количеством ящиков.
Как я могу сделать третий.box пролет от первой линии сетки до последней?
.container {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
}
.box {
background-color: blue;
padding: 20px;
border: 1px solid red;
}
.box:nth-child(3) {
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
}<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>