Покажите, пожалуйста, примеры как можно размещать блоки с помощью 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>