I try to build a grid image galery like the one you can find on AirBnb web site. But I would like do it on a row not column.
I could perfectly reproduce the grid in column but when I try to make it fit in a row (100% of container) my images don't keep their ratio.
This question was closed 2 days ago with reference to this question here but like Airbnb, my grid is fully dynamic I do not know in advance what kind of images will be display ( portrait, landscape) and their order.
As each gridPart container could have 3 images maximum, I could predetermine four templates that could be see in the snippet below. The way I will determine the display will be perform using some javascript by counting the number of portrait and landscape in set of three images.
.container {
max-width: 800px;
margin: 0 auto;
}
.grid {
display: grid !important;
gap: 8px !important;
grid-auto-columns: 1fr !important;
grid-template-rows: 1fr !important;
}
.gridPart {
display: grid !important;
gap: 8px !important;
grid-auto-columns: 1fr !important;
grid-auto-rows: 1fr !important;
}
.imgWrapper {
height: 100%;
position: relative;
width: 100%;
}
.imgWrapper img {
position: absolute;
top: 0;
color: white;
width: 100%;
vertical-align: bottom;
max-width: 100% !important;
}<div class="container">
<div class="grid">
<div class="gridPart" style="grid-area: 1 / 1 / auto/ auto">
<div style="grid-area: 1 / 1 / span 2 / 2;border:solid green 1px;">
<div class="imgWrapper">
<div style="padding-bottom:142.857142857142857%"></div>
<img src="http://placekitten.com/g/140/200" />
</div>
</div>
<div style="grid-area: 1 / 2 / 1 / 2;border:solid orange 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/200/140" />
</div>
</div>
<div style="grid-area: 2 / 2 / auto / auto;border:solid violet 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/200/140" />
</div>
</div>
</div>
<div class="gridPart" style="grid-area: 1 / 2 / auto/ auto">
<div style="grid-area: 1 / 1 / 1 / 1;border:solid green 1px;">
<div class="imgWrapper">
<div style="padding-bottom:142.857142857142857%"></div>
<img src="http://placekitten.com/g/140/200" />
</div>
</div>
<div style="grid-area: 1 / 2 / 1 / 3;border:solid orange 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/140/200" />
</div>
</div>
<div style="grid-area: 1 / 3 / 1 / 4;border:solid violet 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/140/200" />
</div>
</div>
</div>
<div class="gridPart" style="grid-area: 1 / 3 / auto/ auto">
<div style="grid-area: 1 / 1 / span 1 / 2;border:solid green 1px;">
<div class="imgWrapper">
<div style="padding-bottom:142.857142857142857%"></div>
<img src="http://placekitten.com/g/140/200" />
</div>
</div>
<div style="grid-area: 1 / 2 / span 1 / 2;border:solid orange 1px;">
<div class="imgWrapper">
<div style="padding-bottom:142.857142857142857%"></div>
<img src="http://placekitten.com/g/140/200" />
</div>
</div>
<div style="grid-area: 2 / span 2 / auto / auto;border:solid violet 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/200/140" />
</div>
</div>
</div>
<div class="gridPart" style="grid-area: 1 / 4 / auto/ auto">
<div style="grid-area: 1 / 1 / 1 / 1;border:solid green 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/200/140" />
</div>
</div>
<div style="grid-area: 2 / 1 / 2 / 1;border:solid orange 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/200/140" />
</div>
</div>
<div style="grid-area: 3 / 1 / 3 / 1;border:solid violet 1px;">
<div class="imgWrapper">
<div style="padding-bottom:70%"></div>
<img src="http://placekitten.com/g/200/140" />
</div>
</div>
</div>
</div>
</div>expected
