Hello @codeofdreams! I am not sure I fully understand what you want. I feel as though your request doesn’t provide enough details.
I’m going to take my best stab at this based off what I think you’re looking for.
So let’s say I have 9 images all different sizes. I want to evenly distributed them out on one page. One way to do this is with css grid.
#imgs {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(33vh, 33vh);
}
#imgs img {
width: 100%;
height: 100%;
}
Here would be the html for that
<div id=“imgs”>
<img>9 images here
</div>
Because I went with 9 images I chose 3 columns. Then I set the grid-auto-rows
to have a min and max height of 33 of the viewpoint height. So 3 pictures per row each gets about 1/3 of the screen.
Even though the images are really big I have them set to 100% of the <div>.
.
You may need to change some parameters to fit your needs.
Hopefully that helps.
EDIT: I should add that if this is what you’re looking for and you have an un-even amount of images to fill the whole grid you can use span
to have some of them cover more grids.
Here’s my pen demonstrating (I added more images now) https://codepen.io/jfirestorm44/pen/oNbayNa