Как вы создаете странные сетки в Bootstrap 4?

Question

Как вы создаете странные сетки в Bootstrap 4? Например,

Крайний левый столбец занимает два ряда, а справа два ряда, каждый из которых имеет 3 столбца.

||||||||||||||||
|     |  |  |  |
|     |_ |_ |_ |
|     |  |  |  |
|_____|_ |_ |_ |

Answer 1

При использовании сеток Bootstrap вы должны думать о расположении столбцов, а не о расположении строк. Расположение столбцов зависит от высоты содержимого внутри ячеек.

Чтобы продемонстрировать строку, которая охватывает два столбца, я установил высоту строк

<div class="container-fluid">
   <div class="row">
      <div class="col col-md-6">
         <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
      </div>
      <div class="col col-md-6">
         <div class="row">
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(52, 152, 219);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(231, 76, 60);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(52, 73, 94);"></div>
            </div>
         </div>
         <div class="row">
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(22, 160, 133);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(230, 126, 34);"></div>
            </div>
            <div class="col col-md-4">
               <div style="height: 200px; background-color: rgb(149, 165, 166);"></div>
            </div>
         </div>
      </div>
   </div>
</div>