Complex grid with images - html

Question

I have the below grid and I want to transform it into code.
I searched about grids like this and the only reference was about the masonry library but didn't help me.
Another approach was with css only but I couldn't understand the logic behind this.
Any help for a good start to continue with will be appreciated!

Answer 1

You can set a CSS grid with the adequate number of rows and columns, and the distribute the elements as the design:
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-auto-flow: column dense;
width: 95vw;
height: 95vh;
}
.vertical {
grid-row: span 2;
background-color: tomato;
}
.horizontal {
grid-column: span 2;
background-color: lightgreen;
}
.square {
background-color: lightblue;
}
#v2 {
grid-column-start: 3;
}
#v3 {
grid-column-start: 6;
}
#v4 {
grid-column-start: 2;
grid-row: 2 / 4;
}
#v5 {
grid-column-start: 5;
grid-row: 2 / 4;
}
<div class="container">
<div class="vertical" id="v1">V1</div>
<div class="vertical" id="v2">V2</div>
<div class="vertical" id="v3">V3</div>
<div class="vertical" id="v4">V4</div>
<div class="vertical" id="v5">V5</div>
<div class="horizontal" id="h1">H</div>
<div class="horizontal" id="h2">H</div>
<div class="square">S</div>
<div class="square">S</div>
<div class="square">S</div>
<div class="square">S</div>
</div>

Answer 2

I would recommend using Unite Gallary. It is completely free and very easy to use. Try reading their documentation and it will be easy to use. Below is a screenshot.
Unite Gallary

Answer 3

I know this is a very old technique and is generally frowned upon, but you could just use a <table> if you have to support IE, as you specified in a comment to this answer.
table {
table-layout: fixed;
height: 200px;
width: 100%;
}
td {
text-align: center;
vertical-align: bottom;
background-color: blue;
}
<table>
<tr>
<td rowspan="2">Corina</td>
<td>Lydia</td>
<td rowspan="2">Reinas</td>
<td colspan="2">Elise</td>
<td rowspan="2">Vegerra</td>
</tr>
<tr>
<td rowspan="2">Agapi</td>
<td>Amira</td>
<td rowspan="2">Filipa</td>
</tr>
<tr>
<td>Daisy</td>
<td colspan="2">Josephine</td>
<td>Amarylis</td>
</tr>
</table>
Be advised that the table does not react to height as one may expect when using percentages (at least in Firefox 61.0).
table {
table-layout: fixed;
height: 100%;
width: 100%;
}
td {
text-align: center;
vertical-align: bottom;
background-color: blue;
}
<table>
<tr>
<td rowspan="2">Corina</td>
<td>Lydia</td>
<td rowspan="2">Reinas</td>
<td colspan="2">Elise</td>
<td rowspan="2">Vegerra</td>
</tr>
<tr>
<td rowspan="2">Agapi</td>
<td>Amira</td>
<td rowspan="2">Filipa</td>
</tr>
<tr>
<td>Daisy</td>
<td colspan="2">Josephine</td>
<td>Amarylis</td>
</tr>
</table>
BTW: After writing this table I can see why this kind of layout would not be preferred to use because it is very irritating that in some rows there are just columns missing.