First draft for using a image grid to display attached images.

view/templates/content/image_grid.tpl

@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="view/theme/frio/css/image_grid.css" type="text/css" media="screen"/>
+
+<div id="row" class="row">
+	<div class="column">
+        {{foreach $columns.fc as $img}}
+        	{{include file="content/image.tpl" image=$img}}
+		{{/foreach}}
+	</div>
+	<div class="column">
+        {{foreach $columns.sc as $img}}
+    	    {{include file="content/image.tpl" image=$img}}
+		{{/foreach}}
+	</div>
+</div>

view/templates/content/image_grid_column.tpl

@@ -0,0 +1 @@
+<div class="column">{{$images}}</div>

view/theme/frio/css/image_grid.css

@@ -0,0 +1,43 @@
+* {
+	box-sizing: border-box;
+}
+
+.row {
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	-ms-flex-wrap: wrap; /* IE10 */
+	flex-wrap: wrap;
+	padding: 0 4px;
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+	-ms-flex: 50%; /* IE10 */
+	flex: 50%;
+	max-width: 50%;
+	padding: 0 4px;
+}
+
+.column img {
+	margin-top: 8px;
+	vertical-align: middle;
+	width: 100%;
+}
+
+/*!* Responsive layout - makes a two column-layout instead of four columns *!*/
+/*@media screen and (max-width: 50px) {*/
+/*	.column {*/
+/*		-ms-flex: 50%;*/
+/*		flex: 50%;*/
+/*		max-width: 50%;*/
+/*	}*/
+/*}*/
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 150px) {
+	.column {
+		-ms-flex: 100%;
+		flex: 100%;
+		max-width: 100%;
+	}
+}