Как сверстать подобную разметку? Если использую флексы, то по высоте между элементами появляется расстояние, нужно, чтобы они стояли к друг другу вплотную, как на фото
.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>