I would like to build a layout which will have an aside panel that would span the full height of all grid items including auto-generated rows. Since I don't know how many items will be present on the page I can't specify the exact number of columns and rows in the grid properties.
State 1: Grid has 5 items - sidebar column takes 2 rows in height
State 1: Grid has 7 items - sidebar column takes 3 rows in height
The goal is auto expand aside whenever new items are added to the grid.
I tried using
grid-column-start: 3;
grid-row: 1 / -1;
to move aside to the right and make it span all available rows but since I'm not defining grid rows my aside only spans 1 row instead of all auto-generated rows
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: green;
color: #fff;
}
aside {
grid-column-start: 3;
grid-row: 1 / -1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="grid">
<aside>Aside</aside>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>How can I make it span all autogenerated rows?
