I can’t figure out how to make the GROUP NAME element span all rows. The number of rows is unknown and dynamic.
Here I could set grid-row: 1 / span 2 but my grid can have more than 2 rows.
I thought grid-row: 1 / -1 would work but it doesn’t.
body {
margin: 0;
font-size: .75em;
}
.grid {
display: grid;
grid-template-columns: 10fr repeat(48, 1fr);
grid-auto-flow: dense;
background: lightgray;
}
.group-name {
background: lightblue;
grid-row: 1 / -1;
}
.event {
background: yellow;
height: 50vh;
}<div class="grid">
<div class="group-name">
GROUP NAME
</div>
<div class="event" style="grid-column: 34 / span 4;">
EVENT
</div>
<div class="event" style="grid-column: 16 / span 4;">
EVENT
</div>
<div class="event" style="grid-column: 33 / span 4;">
EVENT
</div>
</div>