Здравствуйте. Появился вот такой нюанс. Мне нужно сверстать секцию, в которой блоки расположены как-бы кирпичиками, из-за того, что высота изображения в каждом будет разная.
Я для всех блоков открыл одну строку row, потом каждый блок поместил в col-lg-4
...
...
...
...
...
...
Но тогда получается вот так, как на картинке ниже, из-за того, что row имеет display: flex; и каждый col-lg-4 получается одинаковой высоты. А мне нужно как-то сделать чтобы колонки, которые снизу подсосались к верху, чтобы не было пустого пространства, и было все кирпичиками. Падскажите, пожалуйста, как правильно такое можно сделать?
Ответ
Для данной задачи есть несколько решений.
Каждый столбец отдельным блоком
.el {
background-color: gray;
margin-bottom:5px;
}
Количество элементов в каждом столбце надо будет рассчитать вручную.
Списком, и указать column-count
ul { column-count:2; list-style-type: none; } li { margin-bottom: 5px; background-color: gray; }
В этом случае количество элементов в колонке указывать не надо, оно будет расчитано автоматически, зато адаптивность придётся прописывать вручную, через media query менять количество столбцов.
Flexbox
.container { display: flex; flex-wrap: wrap; flex-direction: column; height: 400px; } .el { background-color: gray; margin:4px; }
В данном решении высоту flex контейнера надо будет рассчитать вручную.
Комментариев нет:
Отправить комментарий