Looking to create a grid of images where each image is displayed side by side. The goal is to have a fixed width and height for the container, with a horizontal scrollbar appearing if there are 12 or more images in the grid. Additionally, any overflow images should be pushed to the right instead of creating a new line below. Currently, all images are spilling over onto a third line.
Here's the CSS for my container:
text-align: left;
white-space: normal;
height: auto;
overflow-x: scroll;
This is how I am styling the images within the container:
display: inline-block;
width: 100px;
margin-right: 17px;
cursor: pointer;
-webkit-box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);
box-shadow: 0px 7px 17px -6px rgba(0,0,0,0.2);
You can view an example of what I'm trying to achieve here: https://i.sstatic.net/K6E5b.png