Привет, мне было интересно, как я могу получить сетку, как показано выше. Может у вас есть какие-нибудь хитрости? :) Я пробовал масонство, но не думаю, что оно для этого подходит.
Я также использую Bootstrap, но это не обязательно должен быть Bootstrap. Может быть, если бы у меня были какие-то ключевые слова, я мог бы их погуглить, но я не знаю, что именно искать.
3 ответа
Это легко сделать с помощью вложенной flexbox демо-версии, созданной для вас.
Отрегулируйте height и width из wrapper в соответствии со своими потребностями. Наслаждайтесь!
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
height: 250px;
}
div {
background: rgb(0, 140, 88);
}
.wrapper > div:first-child {
width: 50%;
}
.wrapper > div:last-child {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
}
.wrapper > div:last-child > div:first-child {
width: 100%;
height: 50%;
background: #2ba982;
}
.wrapper > div:last-child > div:last-child {
height: 50%;
display: flex;
}
.wrapper > div:last-child > div:last-child > div {
width: 50%;
height: 100%;
}
.wrapper > div:last-child > div:last-child > div:first-child {
background: #76c6ac;
}
.wrapper > div:last-child > div:last-child > div:last-child {
background: #bbe2d5;
}<div class="wrapper">
<div></div>
<div>
<div></div>
<div>
<div></div>
<div></div>
</div>
</div>
</div>Да, вы можете сделать это с помощью Bootstrap.
Основным элементом будет одна строка с двумя div (по 50% каждый, например, soo col-md-6). У div справа будет 2 строки, каждая по 50% высоты его родительского элемента. Во втором ряду будет 2 столбца, опять же col-md-6. Не забывайте, что каждый раз, когда у вас есть строка или контейнер, вы всегда должны снова рассматривать систему из 12 столбцов!
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="row half-height">
<div class="col-md-12">
</div>
</div>
<div class="row half-height>
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Не так много времени, чтобы делать jsfiddle, но я думаю, что это было ясно
Вы бы посмотрели на что-то похожее на это ( Примечание: Это лишь одно из многих доступных решений
Что вы делаете, так это используете систему сеток начальной загрузки для создания ваших форм соответствующим образом, и вы устанавливаете высоту левого поля (большого поля), чтобы удвоить высоту меньшего поля.
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color:green;height:600px;">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" style="background-color:blue;height:300px">
</div>
</div>
<div class="row">
<div class="col-md-6"style="background-color:yellow;height:300px"></div>
<div class="col-md-6"style="background-color:red;height:300px"></div>
</div>
</div>
</div>
</div>
Как вы можете видеть в этом коде, я присвоил меньшим воксам высоту, равную половине высоты большого блока, цвета предназначены только для визуального представления и не выполняют никаких функций, используя col-md-6, вы можете разместить два columns в одной строке, что нам и нужно в вашем случае, *Note, bootstrap has 12 columns* используя это, мы можем с уверенностью предположить, что в левом поле нам нужен один div, который 12 columns wide в первой вложенной строке (поскольку у нас есть две строки меньших ящиков (мы используем вложенную строку) и два ящика, которые являются 6 columns wide во второй вложенной строке.
Конечно, в вашем случае встроенные атрибуты стиля будут перемещены в ваш файл style.css
Надеюсь это поможет!