In my layout, there is a grey box element that contains a table with rows of small images. I want the table to automatically adjust based on the number of images so that when the grey box reaches its maximum size, the images move to the next row. Is this achievable?
Additionally, I am trying to make the layout resizable for different screen sizes.
Below is a snippet of the CSS and HTML code:
body {
background-color: #141414;
margin-top:3%;
margin-left: 2%;
margin-right: 2%;
}
/* CSS properties omitted for brevity */
<body>
<div class="video-item">
<p class="font-semibold">Something else</p>
<div class="video-display"></div>
</div>
<div class="video-spacer"></div>
<div class="video-item-2">
<p class="font-semibold">THUMBNAIL PREVIEW</p>
<div id="thumbnail-grid">
<img id="arrow_up" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45">
<table id="thumbs">
<tr>
<td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td>
<!-- Additional image TDs removed for brevity -->
</tr>
</table>
<img id="arrow_down" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45">
</div>
</div>
</body>If solving this with CSS alone is not feasible, I am open to using JavaScript or jQuery as well.
Thank you!