Размещение блоков Bootstrap 5 в зависимости от ширины

Question

Покажите, пожалуйста, примеры как можно размещать блоки с помощью flexbox и grid от фрэймворка Bootstrap 5. Нужно размещать вот по каким требованиям:

Всего четыре блока
Минимальная ширина блока 240px, реальная - все, что доступно блоку по ширине, но не более 512px
Если все четыре блока не помещаются по ширине, нужно сделать 2x2
Если 2x2 также не помещаются по ширине, нужно сделать 1x4
Все блоки при любом размещении центрируются
Высота всех блоков, при любом размещении, одинакова - и равна самому высокому блоку, по его содержимому
Вложенные блоки использовать нельзя, это обязательно!

Пусть будет вот такая заготовка:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Можно ли такое сделать, учитывая требования 1-7?

ADD (мой вариант на флексе, ну вроде так):

<div class="d-flex flex-wrap mt-4 mb-4">

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-1.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-1</h2>
        <p class="card-text fs-6">Some text 1.</p>
      </div>
      <a href="link-1.html" class="stretched-link"></a>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-2.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-2</h2>
        <p class="card-text fs-6">Some text 2.</p>
      </div>
      <a href="link-2.html" class="stretched-link"></a>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-3.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-3</h2>
        <p class="card-text fs-6">Some text 3.</p>
      </div>
      <a href="link-1.html" class="stretched-link"></a>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-3.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-3</h2>
        <p class="card-text fs-6">Some text 3.</p>
      </div>
      <a href="link-3.html" class="stretched-link"></a>
    </div>
  </div>

 </div>

Answer 1

Необходимо

$enable-grid-classes: false
$enable-cssgrid: true

Здесь об этом написано https://getbootstrap.com/docs/5.1/layout/css-grid/#how-it-works

Пример с bootstrap 5 bootstrap CSS grid

Пример без bootstrap 5

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(15rem, 32rem));
  grid-auto-rows: 1fr;
  justify-content: center;
}

.grid__item {
  padding: 1rem;
  border: 1px solid #ccc;
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, minmax(15rem, 32rem));
  }
}

@media (max-width: 576px) {
  .grid {
    grid-template-columns: repeat(1, minmax(15rem, 32rem));
  }
}

<div class="grid">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4<br> long text</div>
</div>

БЛОГ НА HUSL

Размещение блоков Bootstrap 5 в зависимости от ширины

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