Create a list of thumbnail images that re-sizes according to screen width. Uses simple semantic HTML markup together with a bit of CSS3. Media queries can be used as a further enhancement to this technique.
Works with modern browsers including IE8+
HTML:
<ul class="thumbnail-list"> <li><img src="http://placekitten.com/200/200" alt=""></li> <li><img src="http://placekitten.com/200/200" alt=""></li> <li><img src="http://placekitten.com/200/200" alt=""></li> <li><img src="http://placekitten.com/200/200" alt=""></li> <li><img src="http://placekitten.com/200/200" alt=""></li> <li><img src="http://placekitten.com/200/200" alt=""></li> <li><img src="http://placekitten.com/200/200" alt=""></li> <li><img src="http://placekitten.com/200/200" alt=""></li> </ul>
CSS:
.thumbnail-list {
/* remove default list styles */
list-style: none;
margin: 0;
padding: 0;
/* remove spaces between li tags*/
font-size: 0;
}
.thumbnail-list li {
display: inline-block;
vertical-align: top;
width: 33.333%;
padding: 2%;
box-sizing: border-box;
}
.thumbnail-list img {
display: block;
width: 100%;
}
How it works
The first step to styling the unordered list (ul) is to remove default list styles. (If you are already including a CSS reset you can skip this part.) The thumbnail list items (li tags) which contain the images are lined up by displaying them as inline-blocks. Change the width to alter how many items line up in a row. Padding is used to space out the images. (This value can also be changed according to your preferences.) Finally, the CSS3 style “box-sizing” is set to “border-box” to prevent the padding from being added to the total width of the list items. (This allows the images to be spaced out evenly.)
Besides the CSS3 “border-box” style, the final key to making the design responsive is to set the image width to 100%. This ensures that the images always shrink and expand to occupy the full available width inside the li tags they are wrapped width. One disadvantage to making the width 100% is that the images can grow larger than the original sizes which may make them look pixelated. If you want to prevent this you can change “width” to “max-width”. This will still shrink images to fit smaller screens but will not expand them beyond their original size. (Setting the images to “display: block” just removes line-spacing so images will be evenly spaced vertically.)
Optional enhancement using Media Queries
Use media queries to change the number of thumbnails displayed in a row depending on screen orientation or width. Here’s an example of how you can customize the display to show more images in a row for the landscape view of mobile devices such as iPhone and Android.
Additional Optional CSS:
/* Landscape */
@media screen and (orientation:landscape) {
/* show more in a row */
.thumbnail-list li {
width: 20%;
padding: 2%;
}
}
See it in action: https://codepen.io/KristinB/pen/XWadjPx
NOTE: This layout can actually be achieved without the CSS3 “border-box” style by using margins instead of padding to space apart list items and changing the value of the width + margin to equal the total space you want each item to occupy. For example to display 4 images in a row you would use: “width: 23%; margin: 1%;” which equals 25% in total since the margin gets added to both sides of the li tag.
CAVEAT: If you want to include text inside the li tags remember to set the font-size of the li to your desired value as by default it will inherit “font-size: 0” from the ul styles.
CSS Web Design 