異なる高さのレスポンスグリッド

Question

グリッド内のいくつかの異なるサイズのボックスを整列させて反応させる簡単な方法はありますか？

私は、石工を使用して聞いたことがありますが、私は少し単純なものを探しています。これは、高さと幅の両方で200pxので割り切れるすべてと長い800ピクセルです：

Answer 1

あなたがこのタイプのレイアウトを作成するためにFlexboxを使用することができます。

body, html {margin: 0; padding: 0;} 
 
.content { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 
.a, .c { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
} 
 
.box { 
 
    flex: 1; 
 
} 
 
.b { 
 
    flex: 2; 
 
    background: #CC6699; 
 
} 
 
.a .box:nth-child(1) {background: #FF9933;} 
 
.a .box:nth-child(2) {background: #33CCFF;} 
 
.c .box:nth-child(1) {background: #CCCCCC;} 
 
.c .box:nth-child(2) {background: #33CC66;}

<div class="content"> 
 
    <div class="a"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
    <div class="b"></div> 
 
    <div class="c"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>