2

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

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

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

<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>
3
  • А сами вы уже что сделали, чтобы проверить?
    – Quazimorda
    27 июн 2022 в 6:13
  • Да, сделал. Но не все, что хотел в п.1-7. Пункт 6 не понимаю как сделать, если блоки переносятся. нужно, чтобы высота первого и последующего рядов - были одинаковыми (исходя их высоты блока, имеющего максимум). И да ... делал на flexbox, а на grid - вообще не знаю!
    – Majestio
    27 июн 2022 в 10:11
  • Добавил свой вариант
    – Majestio
    27 июн 2022 в 10:15

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.