use a grid to place the gallery items

This has the advantage, that the height of each element in a row is the
same.

pdb-ui/src/main/resources/resources/css/design.css

@@ -185,25 +185,26 @@ textarea {
 	top: 0;
 }
 
-.gallery-item {
-	width: 300px;
-	height: 200px;
-	margin: 10px;
-	float: left;
-	background: white;
-	box-shadow: 5px 5px 10px 0px #aaa;
-	position: relative;
+.card-grid-300 {
+	display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
+    grid-gap: 10px;
+    padding: 10px;
 }
 
-.gallery-item img {
-	max-width: 300px;
-	max-height: 200px;
-	display:block; /* removes 3 pixels extra height around the image */
+.gallery-item {
+	display: flex;
+    flex-flow: column;
+	background: white;
+	box-shadow: 5px 5px 10px 0px #aaa;
+}
+
+.gallery-item a {
+	align-self: center;
 }
 
 .gallery-item .fieldValue{
-	position: absolute;
-	bottom: 0;
+	word-break: break-all;
 }
 
 #result-view-gallery-image-viewer {

pdb-ui/src/main/resources/resources/js/ui.js

@@ -225,7 +225,9 @@ Vue.component('result-view-gallery', {
 	template: `
 	<div id="result-view-gallery"
 		v-if="gallery.tiles">
-		<div v-show="!gallery.image">
+		<div 
+			class="card-grid-300"
+			v-show="!gallery.image">
 			<result-view-gallery-item
 				v-for="item in gallery.tiles"
 				v-bind:key="item.fieldValue"