<style>
    .image-gallery-index {overflow: auto; margin-left: -1%!important;}
    .image-gallery-index a {float: left; display: block; margin: 0 0 1% 1%; width: 19%; text-decoration: none !important;}
    .image-gallery-index a img {width: 100%; display: block;}
    .image-gallery-index a span {display: block; text-align: center; padding: 3px 0;}
</style>

<p class="image-gallery-index">{% for item in page.galleries %}<a href="{{ item.url }}" title="{{ item.title }}"><img src="//images.weserv.nl/?url={{ site.url | replace: 'http://','' | replace: 'https://','' }}{{ item.image }}&w=300&h=300&output=jpg&q=50&t=square" /><span>{{ item.title }}</span></a>{% endfor %}</p>