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?
