Displaying rows of images on 100% width - html

Question

I need to display images in my grid with the following idea: every li elements of each ultag should stay in the same row and be 100% width of the container.
As you can see in the jsfiddle, for the demo, I created 3 ul. So I would like 3 rows of images.
The jsfiddle: is here
The final result should be like below:
I don't know how to proceed so that every row takes 100% width.
So every row (ul) may contains 1, 2, 3, 4 or 5 images.

Answer 1

every li elements of each ultag should stay in the same row and be 100% width of the container
You needs to use Flexbox
Result
ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 3px;
}
li {
flex-grow: 1;
}
li+li {
margin-left: 3px;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<ul>
<li>
<img src="https://via.placeholder.com/250x200?text=A1">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=A2">
</li>
<li>
<img src="https://via.placeholder.com/350x200?text=A3">
</li>
</ul>
<ul>
<li>
<img src="https://via.placeholder.com/200x200?text=B1">
</li>
<li>
<img src="https://via.placeholder.com/300x200?text=B2">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=B3">
</li>
</ul>
<ul class="fivePerRow">
<li>
<img src="https://via.placeholder.com/250x200?text=C1">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=C2">
</li>
<li>
<img src="https://via.placeholder.com/350x200?text=C3">
</li>
<li>
<img src="https://via.placeholder.com/200x200?text=C4">
</li>
<li>
<img src="https://via.placeholder.com/300x200?text=C5">
</li>
</ul>
And same code on JSFiddle

Answer 2

I think using Flexbox will do the job.
ul {
width: 100%;
list-style: none;
display: flex;
justify-content: space-between;
}
li {
display: inline-block;
vertical-align: top;
}
Codepen Demo