I'm currently working on setting up a dynamic gallery. The number of items in the gallery will vary, and I want them to adjust to fit the browser viewport. It seems like it should be a straightforward task?
My current DOM structure is as follows:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Here's the accompanying CSS:
.parent {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 1 auto;
}
However, when there are too many children, they overflow the parent container. I want them to scale their dimensions to fit within the parent. Even with just a few (1-3) children, I want them to adjust accordingly. Shouldn't flex: 1 1 auto be sufficient for this?
Am I approaching this issue incorrectly with CSS grid? Would using Grid be more suitable for my requirements?