Вёрстка галереи фото на flex по заданному html-шаблону

Question

Как сверстать галерею фото на 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>

Answer 1

Не совсем понятно каким должны быть последующие ряды.

Для того чтобы разбить все изображение по рядам - используй flex-wrap

Чтобы красиво вписать изображение в квадрат - fit-object

Чтобы первые 4 изображение были одним стилем, а остальные другим - используй :nth-child

.wrap{
  display:flex;
  flex-wrap:wrap;
  width:100%;
   justify-content:space-around; 
}
.wrap>div>img{
  width:100%;
  height:100%;
  object-fit:cover;
  
}
.wrap>div{
  border-radius:15px;
  margin:5px;
  overflow:hidden;
  
}
.wrap>div:nth-child(-n+4){
  width:calc(25% - 10px);
  height:300px;
}

.wrap>div:nth-child(n+5){
/*   display:none; */
  width:150px;
  height:150px;
  
}

 <div class="wrap">
    <div><img src="https://picsum.photos/seed/p1/800/600" alt="Изображение 01"></div>
    <div><img src="https://picsum.photos/seed/p2/600/300" alt="Изображение 02"></div>
    <div><img src="https://picsum.photos/seed/p3/600/800" alt="Изображение 03"></div>
    <div><img src="https://picsum.photos/seed/p4/800/600" alt="Изображение 04"></div>
    <div><img src="https://picsum.photos/seed/p5/800/600" alt="Изображение 05"></div>
    <div><img src="https://picsum.photos/seed/p6/800/600" alt="Изображение 06"></div>
    <div class="seven"><img src="https://picsum.photos/seed/p7/800/600" alt="Изображение 07"></div>
    <div><img src="https://picsum.photos/seed/p8/800/600" alt="Изображение 08"></div>
    </div>

БЛОГ НА HUSL

Вёрстка галереи фото на flex по заданному html-шаблону

Ответы (1 шт):