В приведенном ниже примере я хочу, чтобы элементы левого столбца, charlie, delta, echo деления, имели полную ширину (занимают оба столбца).
примечания:
- может быть произвольное количество элементов типа
.r1, .r2 правого столбца (ноль - N), поэтому я не буду точно знать, сколько строк должно быть справа против левого - в настоящее время
.a (acme) зависит от высоты .r1, это не желательно! должны иметь независимую высоту - , пожалуйста, нажмите кнопку «Запустить фрагмент кода» ниже, чтобы увидеть, что происходит, а также изображение ниже, показывающее вид макета, который меня интересует
.g {
display: grid;
gap: .25rem;
grid-template-columns: 1fr 100px;
grid-auto-flow: dense;
}
.gi {
padding: 1rem;
border: 1px solid;
border-radius: .25rem;
background-color: rgba(0, 0, 0, 0.1);
}
.l {
grid-column: 1
}
.r { grid-column: 2 }
.r1 { grid-row: 1; height: 100px;}
.r2 { grid-row: 2}
<div class="g">
<div class="gi l a">Acme</div>
<div class="gi l b">Beta</div>
<div class="gi l c">Charlie</div>
<div class="gi l d">Delta</div>
<div class="gi l e">Echo</div>
<div class="gi r r1">Right 1</div>
<div class="gi r r2">Right 2</div>
</div>
Изображение нужного макета:
