JSFiddle - React, Tailwind, and code Playground
HTML
<p>Just one image:</p>
<p><img src="https://placekitten.com/g/640/481"></p>
<p>Two images:</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"></p>
<p>Three images</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"></p>
<p>Four images:</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"></p>
<p>Five images:</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"></p>
<p>Six images:</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"></p>
<p>Seven images:</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"></p>
<p>Eight images:</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"></p>
<p>Nine images:</p>
<p><img src="https://placekitten.com/g/640/481"><img src="https://placekitten.com/g/640/481"><img...
CSS
p {
width: 90%;
margin: 0 auto;
}
p > img {
padding-bottom: 0px;
}
/* One */
img:only-child {
max-width: 100%;
}
/* Two */
img:first-child:nth-last-child(2) ~ img, img:first-child:nth-last-child(2) {
max-width: 49.5%;
margin-right: 1%;
}
/* Three */
img:first-child:nth-last-child(3) ~ img, img:first-child:nth-last-child(3) {
max-width: 32.6%;
margin-right: 1%;
}
/* Four */
img:first-child:nth-last-child(4) ~ img, img:first-child:nth-last-child(4) {
max-width: 24.25%;
margin-right: 1%;
}
/* Last image doesn't need a margin, regardless of count */
img:nth-last-of-type(1) {
margin-right: 0 !important;
}
/* Five, eight, eleven, ... */
/* First two are half-sized (99% / 2) */
img:first-child:nth-last-child(3n+5) ~ img, img:first-child:nth-last-child(3n+5) {
max-width: 49.5%;
margin-right: 1%;
}
/* Last n - 2 are (98% / 3) */
img:first-child:nth-last-child(3n+5) + img ~ img {
max-width: 32.6%;
margin-right: 1%;
}
/* But second, fifth, eighth, ... have no right margin */
img:first-child:nth-last-child(3n+5) ~ img:nth-child(3n+2) {
margin-right: 0;
}
/* Six, nine, twelve, ... */
/* Six, nine, twelve, ... are all (98% / 3) */
img:first-child:nth-last-child(3n+6) ~ img, img:first-child:nth-last-child(3n+6) {
max-width: 32.6%;
margin-right: 1%;
}
/* Every third one of these has no right margin. */
img:first-child:nth-last-child(3n+6) ~ img:nth-child(3n) {
margin-right: 0;
}
/* Seven, ten, thirteen, ... */
/* First four are half-sized (99% / 2) */
img:first-child:nth-last-child(3n+7) ~ img, img:first-child:nth-last-child(3n+7) {
max-width: 49.5%;
margin-right: 1%;
}
/* Last n - 4 are (98% / 3) */
img:first-child:nth-last-child(3n+7) + img + img + img ~ img {
max-width: 32.6%;
margin-right: 1%;
}
/* The second and fourth, seventh, tenth, ... have no right margin */
img:first-child:nth-last-child(3n+7) + img,
img:first-child:nth-last-child(3n+7) ~ img:nth-child(3n+4) {
margin-right: 0;
}