IMAGE GALLERY V. ADAPTIVE WITH BORDERS

IMAGE GALLERY V. ADAPTIVE WITH BORDERS
Directions: https://efryndiel.dreamwidth.org/9104.html
Credit to Laena @ efryndiel.dreamwidth.org

<center><span style="font-family: palatino, serif; font-size: 22pt; color: #804024;">&mdash;&mdash; HEADER TEXT &mdash;&mdash;</span></center>

<raw-code>
<div style="margin: 25px auto; max-width: 75%;">

<!-- images -->
<ul style="display: flex; flex-flow: row wrap; margin: 0; padding: 0;">

<!-- code snippet to c/p -->
<li style="height: auto; flex-grow: 1; list-style-type: none; margin: 1px; padding: 2px; background-color: #866a4c;"><img src="URL" title="blah blah blah" style="max-height: 200px; min-width: 100%; object-fit: cover; vertical-align: bottom;">

<li style="height: auto; flex-grow: 1; list-style-type: none; margin: 1px; padding: 2px; background-color: #866a4c;"><img src="URL" title="blah blah blah" style="max-height: 200px; min-width: 100%; object-fit: cover; vertical-align: bottom;">

<li style="height: auto; flex-grow: 1; list-style-type: none; margin: 1px; padding: 2px; background-color: #866a4c;"><img src="URL" title="blah blah blah" style="max-height: 200px; min-width: 100%; object-fit: cover; vertical-align: bottom;">

<!-- final item so the last row doesn't stretch weird (match the height to the rest) -->
<li style="height: 200px; flex-grow: 10; list-style-type: none;"></ul>
</div>
</raw-code>

<!-- credit -->
<center><font style="font-family: trebuchet ms, sans-serif; font-size: 9pt;"><a href="https://efryndiel.dreamwidth.org/9104.html" style="color: #804024; text-decoration: none;">code</a> by <a href="https://efryndiel.dreamwidth.org" style="color: #804024; text-decoration: none;">efrynidel</a></center>