Как можно расположить картинки, чтобы было как на макете?

Question

[lenniqq]

хочу расположить картинки, как на макете, но не получается, пробовал через flex, grid, разделял их в отдельные блоки, все ровно не получается (может где то материал не доучил), кто может подсказать, как сделать?

Comments

[VoidVolker]

lenniqq показывайте ваши попытки в виде песочницы, иначе это нарушение правил 5.12.

[Александр Васильев]

надо доучить flex-wrap для внешнего элемента
надо доучить flex-позиционирование для внутренних элементов
там все элементарно

[Ankhena]

Боюсь представить, что там может не получиться. Показывайте в песочнице, что пробовали и что не получилось.

Список, в нем тексты, картинки псевдоэлементами.

Флекс: wrap, center, gap
Грид: 5 колонок, gap

Если в макете присутствует ещё оптическая компенсация, то делаете и её. Чем угодно, отступами, коррекцией сетки, трансформом, исправлением полотна картинки и т.д.

Answer 1

[Oliver Host]

<div class="container">
  <div class="item">
    <img src="https://habrastorage.org/webt/67/b0/89/67b089cf5988d118774526.png" alt="Пиво">
    <p>Пиво</p>
  </div>
  <div class="item">
    <img src="https://habrastorage.org/webt/67/b0/89/67b089cf5988d118774526.png" alt="Пивные напитки">
    <p>Пивные напитки</p>
  </div>
  <div class="item">
    <img src="https://habrastorage.org/webt/67/b0/89/67b089cf5988d118774526.png" alt="Сидр">
    <p>Сидр</p>
  </div>
  <div class="item">
    <img src="https://habrastorage.org/webt/67/b0/89/67b089cf5988d118774526.png" alt="Квас">
    <p>Квас</p>
  </div>
  <div class="item">
    <img src="https://habrastorage.org/webt/67/b0/89/67b089cf5988d118774526.png" alt="Лимонад">
    <p>Лимонад</p>
  </div>

</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.item {

    width: 30%;
  text-align: center;
}

.item img {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.item p {
  margin-top: 10px;
}

Comments

[Oliver Host]

Пример, что это работает, если у вас не будет работать, то возьмите именно эту конструкцию за основу и добавляйте уже к ней нужные отступы, размеры, элементы и пр.