列間の等しい入れ子行を持つFlexboxグリッド

Question

私はFlexboxグリッドCSSライブラリ - flexboxgrid.comを使用しており、3列レイアウトを行っています。この3つの列のレイアウトでは、各列にネストされた行を作成します。

入れ子になっている行も他のすべての列と同じ高さになるようにしたいと思います。

これは、私が現在達成していますされています。私は、セクション4を正確部2

と整列されることを望ん

Current Achievementまた、私は現在達成しています何を証明するためにJSFiddleを行っています。

HTML：

<div class="row"> 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome"> 
     <div class="box"> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section1<br/><br/><br/></div> 
       </div> 
      </div> 
      <br/> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section2<br/><br/><br/></div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome"> 
    <div class="box"> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section3<br/><br/><br/><br/></div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section4<br/><br/><br/></div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-no-gutter fullWidthBackgroundImageHome"> 
     <div class="box"> 
      <div class="row"> 
       <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
        <div class="box">Section5</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

これを達成するための方法上の任意のソリューション？

Answer 1

@Paulie_Dは、このためにCSS gridを使用するように彼の提案では正しいです。ご覧のとおり、第1、第2、第4の項目に改行を追加し、2番目の行全体が個々の高さに適応しました。これは、あなたが望んだ動作であるホープ：

body { 
 
    margin: 40px; 
 
} 
 

 
.wrapper { 
 
    display: grid; 
 
    grid-template-columns: 100px 100px 100px; 
 
    grid-gap: 10px; 
 
    background-color: #fff; 
 
    color: #444; 
 
} 
 

 
.box { 
 
    background-color: #444; 
 
    color: #fff; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    font-size: 150%; 
 
} 
 

 
.c { 
 
\t \t grid-column-start: 2; 
 
\t \t grid-column-end: 3; 
 
\t \t grid-row-start: 1; 
 
\t \t grid-row-end: 2; 
 
\t } 
 
\t .d { 
 
\t \t grid-column-start: 2; 
 
\t \t grid-column-end: 3; 
 
\t \t grid-row-start: 2; 
 
\t \t grid-row-end: 3; 
 
\t } 
 
\t .f { 
 
\t \t grid-column-start: 3; 
 
\t \t grid-column-end: 4; 
 
\t \t grid-row-start: 2; 
 
\t \t grid-row-end: 3; 
 
\t } 
 
\t .a { 
 
\t \t grid-column-start: 1; 
 
\t \t grid-column-end: 2; 
 
\t \t grid-row-start: 1; 
 
\t \t grid-row-end: 2; 
 
\t } 
 
\t .b { 
 
\t \t grid-column-start: 1; 
 
\t \t grid-column-end: 2; 
 
\t \t grid-row-start: 2; 
 
\t \t grid-row-end: 3; 
 
\t } 
 
\t .e { 
 
\t \t grid-column-start: 3; 
 
\t \t grid-column-end: 4; 
 
\t \t grid-row-start: 1; 
 
\t \t grid-row-end: 2; 
 
\t }

<div class="wrapper"> 
 
    <div class="box a">A<br/><br/><br/></div> 
 
    <div class="box b">B<br/><br/><br/></div> 
 
    <div class="box c">C</div> 
 
    <div class="box d">D<br/><br/><br/><br/><br/></div> 
 
    <div class="box e">E</div> 
 
    <div class="box f">F</div> 
 
</div>