Как сверстать галерею фото на flex, используя только CSS по заданному html-шаблону, который нельзя менять?
Задача:
Первый вариант строго по 4 фото в ряд, но чтобы не зависело от ширины экрана. То есть при ширине 1000px ширина фото должна быть 250px c отступами и рамками, при ширине 1200 — 300 на каждое фото, тогда их будет по 4 в ряд и т. д.
Второй вариант с переменным количеством в ряду (это зависит от ширины экрана), но с фиксированным размером рамки 150px на 150px.
Фото разных (любых) размеров и пропорций, добавив рамку чтобы смотрелось ровно.
Html-разметка для обоих вариантов должна быть одинаковой.
Решение необходимо сделать на основе этого шаблона:
<style>.wrap div {border: 1px solid grey;padding:3px}</style>
<div class="wrap">
<div><img src="01.jpg" alt="Изображение 01"></div>
<div><img src="02.jpg" alt="Изображение 02"></div>
<div><img src="03.jpg" alt="Изображение 03"></div>
<div><img src="04.jpg" alt="Изображение 04"></div>
<div><img src="05.jpg" alt="Изображение 05"></div>
<div><img src="06.jpg" alt="Изображение 06"></div>
<div class="seven"><img src="07.jpg" alt="Изображение 07"></div>
<div><img src="08.jpg" alt="Изображение 08"></div>
</div>