Row with dynamic number of columns in HTML/CSS - html

Question

I have a Razor page that displays a collection of thumbnail images in a vertical stack:
#foreach (var photo in Model)
{
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="#photo.LargeSquareThumbnailUrl" alt="Many cups!" />
</div>
}
However, what I have been trying to do is stack the images horizontally on one row. And if it overflows (which it nearly always will do) then to display with a horizontal scroll bar.
I guess I would handle the overflow in CSS, but I am unable to work out how to stack the images in the first place. Can anyone help?

Answer 1

I would use a container with white-space:nowrap and put each pod as inline block:
.container {
white-space: nowrap;
overflow: auto;
max-width: 100%;
}
.wrapper {
display: inline-block;
white-space: normal;
}
<div class="container">
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
</div>