В Bootstrap 5 можно использовать систему сеток grid для растягивания столбцов на N строк.
Для начала, необходимо создать контейнер с классом container или container-fluid, в котором будут располагаться столбцы. Затем, внутри контейнера создаем ряд с классом row, в котором будут содержаться столбцы.
Для растягивания столбца на N строк можно использовать класс col, за которым следует номер колонки, а затем указать количество строк, на которое нужно растянуть столбец. Например, чтобы растянуть столбец на 2 строки, нужно использовать класс col-12 col-md-6 или col-12 col-lg-6. Это означает, что соответствующий столбец будет занимать все 12 колонок на маленьких или средних экранах, и половину ширины (6 колонок) на больших экранах.
Если вам нужно растянуть несколько столбцов на N строк, вы можете применить классы col для каждого столбца и указать необходимую ширину каждого столбца. Например, чтобы растянуть два столбца на 2 строки, вы можете использовать классы col-6 или col-md-6 для каждого столбца.
Пример использования:
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<!-- Содержимое столбца -->
</div>
<div class="col-12 col-md-6">
<!-- Содержимое столбца -->
</div>
</div>
</div>
В этом примере первый столбец будет растянут на 2 строки, а второй столбец также растянется на 2 строки. На небольших экранах (mobile-first) оба столбца будут занимать всю доступную ширину, а на средних и больших экранах они будут занимать половину ширины.
Вариантов комбинирования классов col и других классов Bootstrap много, и в зависимости от своих конкретных потребностей, вы можете настроить растягивание столбцов на N строк по своему усмотрению. Надеюсь, это поможет вам в работе с Bootstrap 5 и его системой сеток.