In the example below, I want the left column elements, charlie
, delta
, echo
divs to be full width (occupy both columns).
notes:
.r1
, .r2
type elements (zero - N) so I won't know exactly how many rows should be on the right vs left.a
(acme) is affected by .r1
's height, this is not desired! should have independent heights.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>
Image of desired layout:
You have two challenges in your question:
You want grid areas in the first column to expand into the second column when the row space is unoccupied.
You want grid areas in one column to have variable heights, but without impacting the heights of grid areas in the other column.
CSS Grid cannot do either automatically. You need to set additional CSS rules or use a script.