Резиновые группы блоков для верстки на bootstrap
Написал несколько вариантов резиновых групп блоков для верстки. Пригодится, если нужно строить группы блоков. Ниже приведены примеры верстки блоков на bootstrap и ниже код.
CSS style простой для демонстрации:
.sd-card {
background-color: #D3B27B;
min-height: 150px;
height: 100%!important;
}
Вариант #1.
<div class="sd-cards">
<div class="row align-items-strench">
<div class="col-md-8">
<div class="d-flex flex-column justify-content-between h-100">
<div class="h-100">
<div class="row align-items-strench justify-content-between h-100">
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-12 pt-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
Вариант #2.
<div class="sd-cards mt-5">
<div class="row align-items-strench">
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-8">
<div class="d-flex flex-column justify-content-between h-100">
<div class="h-100">
<div class="row align-items-strench justify-content-between h-100">
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-12 pt-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Вариант #3.
<div class="sd-cards mt-5">
<div class="row align-items-strench">
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-8">
<div class="d-flex flex-column justify-content-between h-100">
<div class="h-100">
<div class="row align-items-strench justify-content-between h-100">
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-6 pt-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-6 pt-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Вариант #4.
<div class="sd-cards mt-5">
<div class="row align-items-strench">
<div class="col-md-4">
<div class="row h-100">
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="d-flex flex-column justify-content-between h-100">
<div class="h-100">
<div class="row align-items-strench justify-content-between h-100">
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-6 pt-4">
<div class="sd-card">
</div>
</div>
<div class="col-md-6 pt-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Вариант #5.
<div class="sd-cards mt-5">
<div class="row align-items-strench">
<div class="col-md-6">
<div class="row h-100">
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex flex-column justify-content-between h-100">
<div class="h-100">
<div class="row align-items-strench justify-content-between h-100">
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-12 pt-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Вариант #6.
<div class="sd-cards mt-5">
<div class="row align-items-strench">
<div class="col-md-6">
<div class="row h-100">
<div class="col-md-6">
<div class="row h-100">
<div class="col-md-12">
<div class="sd-card">
</div>
</div>
<div class="col-md-12 pt-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="d-flex flex-column justify-content-between h-100">
<div class="h-100">
<div class="row align-items-strench justify-content-between h-100">
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-6">
<div class="sd-card">
</div>
</div>
<div class="col-md-12 pt-4">
<div class="sd-card">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Иногда не хочется терять время на подобного рода резиновые блоки, так что эти заготовки могут немного облегчить жизнь. Бывает необходимость делать группы более сложного состава, но в таком случае придется где-то доработать структуру.
Добавить комментарий