Is it possible to create a CSS grid system that meets the following requirements:
- The grid should have arbitrary height (with consistent width) and when a grid overflows, it should stack vertically underneath the preceding grid, regardless of other grid heights.
- If the window size decreases to a certain point, the grid system should collapse and only display grids stacked vertically.
https://i.stack.imgur.com/vgI73.png
After some research, I discovered a potential solution for the first requirement using flexbox layout. However, I'm struggling with making the grids stack vertically once they collapse, especially when elements like d1 and d4 end up next to each other due to being part of the same column. Any suggestions on how to address this issue?
Edit: You can view my current code here
#container {
background-color: #aaa;
margin: 0 auto;
height: 500px;
width: 200px;
display: flex;
}
.box {
background-color: white;
border: 1px solid black;
margin: 2%;
width: 94%;
display: block;
box-sizing: border-box;
}
.column {
display: flex;
flex-direction: column;
width: 33%;
}<div id='container'>
<div class="column">
<div class='box' style="height:70px; background-color: red;">1</div>
<div class='box' style="height:86px; background-color: orange;">4</div>
</div>
<div class="column">
<div class='box' style="height:130px; background-color: grey;">2</div>
<div class='box' style="height:110px; background-color: green;">5</div>
</div>
<div class="column">
<div class='box' style="height:90px;">3</div>
<div class='box' style="height:40px;">6</div>
</div>
</div>