Как правильно сделать такую структуру?

Question

как будет правильным сделать так по колонкам ?

Answer 1

Для чётных колонок просто добавляете дополнительный padding-top (а на определённом брейкпоинте, когда новости выстраиваются в одну колонку, убираете его).

В моём примере клик на кнопку имитирует вывод новостей из базы. Покликайте и посмотрите - ничего сложного:

let news = '<div class="col-sm-6 news-item-col"><div class="news-item">Новость</div></div>';

$('button').click(function(){
    $('.news-wrap').append(news);
})

.news-item {
  background-color: #000;
  color: white;
  padding: 30px;
  height: 200px;
}
.news-item-col {
  padding: 15px;
}
.news-item-col:nth-of-type(even) {
  padding-top: 80px;
}
@media (max-width: 575px) {
  .news-item-col:nth-of-type(even) {
    padding-top: 15px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<button>Добавить новость</button>
<div class="container-xl">
  <div class="row news-wrap"></div>
</div>

БЛОГ НА HUSL

Как правильно сделать такую структуру?

Ответы (1 шт):