Как сделать сетку постов как в pinterest

Question

Всем привет! Подскажите пожалуйста как сделать так чтобы сетка была как в pinterest
Вот код который я написал (используется bootstrap 5):

    <div class="container">
    <div class="row row-cols-1 row-cols-md-5 g-4  justify-content-md-center">
        <div class="col-md-6 col-lg-4">
            <div class="card my-2">
                <img src="https://cdn1.iconfinder.com/data/icons/business-company-1/500/image-1024.png"
                    class="card-img-top img-fluid" alt="...">
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Предложу вариант CSS с column-count для создания многоколоночной сетки

и break-inside: avoid; для предотвращения разрывов внутри элементов сетки

если требуется точная настройка отступов и позиционирования, то тут лучше использовать специальные бибилиотеки, например Masonry, добавив их через CDN скрипты

я же предложу вариант такой :

.grid {
  column-count: 4;
  column-gap: 1rem;
}

.grid-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

.card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
}

.card-footer {
  background-color: #f8f9fa;
}

@media (max-width: 768px) {
  .grid {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .grid {
    column-count: 1;
  }
}

<div class="container">
  <div class="grid">
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn1.iconfinder.com/data/icons/business-company-1/500/image-1024.png" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2015/02/04/05/01/musician-623362_1280.jpg"
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 5 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2020/02/25/19/16/stawberry-4879794_640.jpg" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 10 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2013/07/13/11/43/cat-158514_640.png" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 15 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2014/04/05/11/39/ship-316557_640.jpg" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 20 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2021/02/18/21/05/woman-6028423_640.jpg" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 25 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2018/04/16/23/37/pencil-3326179_640.jpg" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 30 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2021/01/17/06/29/oranges-5924067_640.jpg" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 35 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2017/05/12/04/47/eye-2306084_640.png" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 40 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2013/07/12/12/40/smiley-146093_1280.png" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 40 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2023/05/27/22/56/kitten-8022452_640.jpg" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 40 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2024/07/04/05/07/butterfly-8871769_640.jpg" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 40 mins ago</small>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <img src="https://cdn.pixabay.com/photo/2024/06/22/20/06/eiffel-tower-8846952_1280.png" 
         class="card-img-top img-fluid" alt="...">
        <div class="card-footer">
          <small class="text-muted">Last updated 40 mins ago</small>
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать сетку постов как в pinterest

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