I think this is more of a CSS question, than a Thymeleaf question. But here is one approach which may help you.
The approach is inspired by details in this question.
The following Thymeleaf template assumes you want to display five identially-sized squares in a row, with an image (or video) in each square:
<!doctype html>
<html lang="en" xmlns_th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Grid Demo</title>
<style>
<!-- included just for reference
div.three {
float: left;
position: relative;
width: 29%;
padding-bottom: 29%;
margin: 1.7%;
border: 1px solid grey;
}
div.four {
float: left;
position: relative;
width: 22%;
padding-bottom: 22%;
margin: 1%;
border: 1px solid grey;
}
-->
<!-- five squares in a horizontal row -->
div.five {
float: left;
position: relative;
width: 17%;
padding-bottom: 17%;
margin: 1.1%;
border: 1px solid grey;
}
div.content {
position: absolute;
height: 80%;
width: 90%;
padding: 10% 5%;
}
div.table {
display: table;
height: 100%;
width: 100%;
}
div.table-cell {
display: table-cell;
vertical-align: middle;
}
.content .rs {
width: auto;
height: auto;
max-height: 90%;
max-width: 100%;
}
</style>
</head>
<body>
<div th_each="inst, iStat : ${instances}" class="five">
<div class="content">
<div class="table">
<div class="table-cell">
<img class="rs" th_attr="src=${inst}"/>
</div>
</div>
</div>
</div>
</body>
In my case, the end result looks like this, across the width of my browser screen:
Points to note:
1) If you want to dynamically display 3, 4, or 5 boxes, then you can parameterize the class="five" attribute in the Thymeleaf template. The size of the ${instances} object will tell you which class you need:
${#lists.size(instances)}
2) If you want to add video controls in a square, that would involve passing an object to Thymeleaf which contains not only the media file name, but a boolean (or similar) to indicate if the media is playable. Add such content in its own <div>, following the relevant <img> tag:
<div th_if="${isVideo}">...</div>
I hope that gives you some ideas.
