Как сверстать картинки в шахматном порядке?

Question

Как сверстать картинки в шахматном порядке?

Рейтинг: 1Ответов: 1Опубликовано: 08.07.2023

Что тут лучше использовать flex или position: absolute? По клику на картинках должны открываться ссылки

css

Источник: Stack Overflow на русском

Answer 1

▲ 4Принят

Flex через margin можно:

.socials {
  display: flex;
  gap: 20px;
}

.social {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: purple;
}

.social:nth-child(even) {
  margin-top: 40px;
}

<div class="socials">
  <div class="social"></div>
  <div class="social"></div>
  <div class="social"></div>
  <div class="social"></div>
</div>

Как сверстать картинки в шахматном порядке?

Ответы