Bootstrap不同的高度方块

Question

我尝试从下图中进行方形设置。 设置将是这样的：

<div class="container-fluid">
         <div class="row">
                 <div class="color_red col-md-6">Heyyy</div>
                 <div class="color_blue col-md-3">hi</div>
         </div>
           <div class="row">
               <div class="offset-md-3 color_blue col-md-3">hi</div>
                 <div class="upped color_red col-md-6">Heyyy</div>
          </div>
      </div>

如何在不使用div高度的情况下设置fixed高度。我已经读到这可以通过使用padding-bottom:100%来实现，但我无法重现它。有任何想法吗？

Answer 1

为什么不使用CSS网格：

body {
  display: grid;
  grid-template-areas: 
  "a a s ." 
  "a a b b" 
  ". p b b";
  grid-template-columns: repeat(4,70px);
  grid-template-rows: repeat(3,70px);
  grid-gap:1px;
}

.big {
  background: red;
  color:#fff;
  text-align:center;
}

.small {
  background: blue;
  color:#fff;
  text-align:center;
}

.s {
  grid-area: s;
}

.p {
  grid-area: p;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

<div class="big a">
hey am big
</div>
<div class="big b">
hey am big
</div>
<div class="small s">
hi
</div>
<div class="small p">
hi
</div>