0

Как сверстать подобную разметку? Если использую флексы, то по высоте между элементами появляется расстояние, нужно, чтобы они стояли к друг другу вплотную, как на фотовведите сюда описание изображения

.news {
  background: #f9f6e5;
  padding: 40px 0;

  &__inner {
    margin-top: 40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
  }

  &__item-img {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  &__item-title {
    padding: 8px 20px 12px;
    width: 270px;
    background: #fff;

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  &__item {
    margin-bottom: 31px;
    &:last-child {
      margin-bottom: 0;
    }
  }
<div class="news__inner">
      <div class="news__item news__item-444">
        <img class="news__item-img" src="./images/news-1.png" alt="" />

        <div class="news__item-title"><h5>3D в брендинге</h5></div>
      </div>

      <div class="news__item news__item-341">
        <img class="news__item-img" src="./images/news-2.png" alt="" />

        <div class="news__item-title"><h5>Контекстная реклама</h5></div>
      </div>

      <div class="news__item news__item-383">
        <img class="news__item-img" src="./images/news-3.png" alt="" />

        <div class="news__item-title"><h5>Графика</h5></div>
      </div>

      <div class="news__item news__item-210">
        <img class="news__item-img" src="./images/news-4.png" alt="" />

        <div class="news__item-title"><h5>Корпоративная культура</h5></div>
      </div>

      <div class="news__item news__item-197">
        <img class="news__item-img" src="./images/news-5.png" alt="" />

        <div class="news__item-title"><h5>Уникальный дизайн</h5></div>
      </div>

      <div class="news__item news__item-341">
        <img class="news__item-img" src="./images/news-6.png" alt="" />

        <div class="news__item-title"><h5>Взгляд со стороны</h5></div>
      </div>
      <div class="news__item news__item-218">
        <img class="news__item-img" src="./images/news-7.png" alt="" />

        <div class="news__item-title"><h5>Соцсети и их польза</h5></div>
      </div>

      <div class="news__item news__item-436">
        <img class="news__item-img" src="./images/news-8.png" alt="" />

        <div class="news__item-title"><h5>Эксклюзивность</h5></div>
      </div>
    </div>

2

1 ответ 1

0

Познакомился с такой штукой, как Masonry, только пришлось каждому блоку задать свою высоту

const container = document.querySelector(".news__inner");

const masonry = new Masonry(container, {
  columnWidth: 290,
  itemSelector: ".news__item",
});

Ваш ответ

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

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