-2

Подскажите пожалуйста, как можно реализовать кладку monosory в три колонки из изображений разного размера, но чтобы первый и третий столбец были ниже среднего столбца на css grid или flex. И чтобы содержимое внутреннего контейнера обрезалось по размеру внешнего контейнера.

  <div class="container">
  <div class="picture-container">
    <div class="picture-inner-container">
      <div class="item" style="height: 140px"></div>
      <div class="item" style="height: 190px"></div>
      <div class="item" style="height: 170px"></div>
      <div class="item" style="height: 120px"></div>
      <div class="item" style="height: 160px"></div>
      <div class="item" style="height: 180px"></div>
      <div class="item" style="height: 140px"></div>
      <div class="item" style="height: 150px"></div>
      <div class="item" style="height: 170px"></div>
      <div class="item" style="height: 170px"></div>
      <div class="item" style="height: 160px"></div>
      <div class="item" style="height: 180px"></div>
      <div class="item" style="height: 140px"></div>
      <div class="item" style="height: 150px"></div>
      <div class="item" style="height: 170px"></div>
      <div class="item" style="height: 170px"></div>
    </div>
  </div>
</div>

.picture-container {
  overflow-y: hidden;
  height: 1800px;
  position: relative;
    margin: 0 auto;
  width:1440px;
}

.picture-inner-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 30px 24px;
  max-width: 1440px;
  width: 100%;
  height: 1000px;
}

.item {
  display: block;
  object-fit: cover;
}

.item:nth-child(3n + 1) {
  position: relative;
  top: 50px;
}

.item:nth-child(3n + 3) {
  position: relative;
  top: 50px;
}

.item {
  width: 32%;
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}
2

1 ответ 1

0

попробуйте так:

.item:nth-child(3n + 2) {
  position: relative;
  top: 50px;
}

если top не работает то можно попробовать с отрицательными маржинами:

.item:nth-child(3n + 2) {
  margin-top: -40px;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.