Макет Bootstrap 5 для карточек разных размеров - как на Pinterest

#html #css #twitter-bootstrap #masonry #bootstrap-5

#HTML #css #twitter-bootstrap #кладка #bootstrap-5

Вопрос:

Я создаю веб-сайт, который будет использовать Bootstrap 5, в интернете будет раздел, в котором отображаются несколько таких карточек

Как вы можете видеть, каждая карточка может иметь разные размеры (в зависимости от описания и эскиза)

Как мне сделать их компактными, как на домашней странице Pinterest

Какой класс мне нужно использовать (в bootstrap 5) или какой макет

Ответ №1:

Как объясняется в документах Bootstrap 5, плагин Masonry JS является рекомендуемым вариантом для этого типа макета «Pinterest». Макет карточки с несколькими столбцами (card-columns), который использовался в Bootstrap 4, больше не доступен в Bootstrap 5.

Использовать плагин Masonry очень просто. Просто используйте соответствующий col-* класс, чтобы задать количество столбцов в нем, а затем data-masonry атрибут для содержащего row …

 <div class="container">
    <div class="row" data-masonry='{"percentPosition": true }'>
        <div class="col-*">
            ...
        </div>
    </div>
</div>

https://codeply.com/p/yrjCBwUeKR

Примечание: Опция CSS grid masonry (ie: grid-template-rows: masonry; ), упомянутая другими, в настоящее время работает только в Firefox и пока не является рекомендуемой опцией.

1. Спасибо, я также добавлю, что мне приходится использовать imagesloaded для решения проблемы, когда загрузка изображений приводит к тому, что кладка выглядит странно

2. Это не будет работать без этого в вашем основном HTML-файле <script src=» cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist /… » целостность=»sha384-GNFwBvfVxBkLMJpYMOABq3c d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/ 7D» crossorigin=»анонимный» асинхронный></script>

Ответ №2:

Не используйте Bootstrap для этого. Используйте функцию CSS Grid, которая поможет вам пройти цикл, если загружается динамический контент, а также очень проста в настройке.

 .grid-container {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
    text-align: center;
    margin-top: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

Развернуть фрагмент

Ответ №3:

 #cont {
  columns:3;
  column-gap: 5px;
}
#cont>div {
  background: #c1c1ff;
  margin-bottom: 5px;
  break-inside:avoid;
}

 <div id="cont">
<div style="height:30px"></div>
<div style="height:50px"></div>
<div style="height:70px"></div>
<div style="height:55px"></div>
<div style="height:90px"></div>
<div style="height:40px"></div>
<div style="height:60px"></div>
<div style="height:35px"></div>
</div>

Развернуть фрагмент

Ответ №4:

То, чего вы хотите добиться, называется макетом кладки. Для этого есть разные способы, с помощью CSS grid, Flexbox или с помощью функций столбцов CSS. Проверьте эту ссылку на css-tricks.com подробнее о подходах.