How to Justify a Image Grid? - html

Question

I want all the rows to be of the same width and the images to occupy the full width of the row. Images can be fit to cover the dimensions. I have attached the code pen: https://codepen.io/shridhar_ke/pen/gOvpZOB
.header {
text-align: center;
padding: 32px;
}
.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 150px;
width: 100%;
margin-top: 8px;
text-align: justify;
}
.row img {
margin-left: 8px;
horizontal-align: middle;
height: 100%;
object-fit: cover;
width:auto;
}
<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" style="height:100%">
<img src="https://via.placeholder.com/160x200.png">
<img src="https://via.placeholder.com/200x200.png" style="height:100%">
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" style="height:100%">
<img src="https://via.placeholder.com/300x200.png" style="height:100%">
<img src="https://via.placeholder.com/400x200.png" style="height:100%">
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" style="height:100%">
<img src="https://via.placeholder.com/320x200.png" style="height:100%">
<img src="https://via.placeholder.com/240x180.png" style="height:100%">
</div>
</div>

Answer 1

I think it's possible with pure CSS. The key here is using the flex property.
Using the flex property
By setting flex: 1 1 auto; to the images, they're allowed to grow or shrink in order to fill up the entire row.
The only 'problem' here is that when the viewport gets too small, some rows will start shrinking and others won't. This is due to the fact that the height of your rows is hard coded to 150px. This is demonstrated by the code below:
.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 150px;
width: 100%;
margin-top: 8px;
/* Can be left out:
text-align: justify; */
}
.row img {
margin-left: 8px;
/* This property doesn't exist:
horizontal-align: middle; */
height: 100%;
object-fit: cover;
/* Can be left out:
width: auto; */
flex: 1 1 auto; /* Added this property */
}
<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" />
<img src="https://via.placeholder.com/160x200.png" />
<img src="https://via.placeholder.com/200x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" />
<img src="https://via.placeholder.com/300x200.png" />
<img src="https://via.placeholder.com/400x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" />
<img src="https://via.placeholder.com/320x200.png" />
<img src="https://via.placeholder.com/240x180.png" />
</div>
</div>
Adding responsive units to the mix
This problem can be fixed by changing the height of the rows using a responsive unit, like vw (viewport width), like I did in the final version below:
.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 15vw; /* Changed this property */
width: 100%;
margin-top: 8px;
}
.row img {
margin-left: 8px;
height: 100%;
object-fit: cover;
flex: 1 1 auto; /* Added this property */
}
<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" />
<img src="https://via.placeholder.com/160x200.png" />
<img src="https://via.placeholder.com/200x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" />
<img src="https://via.placeholder.com/300x200.png" />
<img src="https://via.placeholder.com/400x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" />
<img src="https://via.placeholder.com/320x200.png" />
<img src="https://via.placeholder.com/240x180.png" />
</div>
</div>