Flexbox Grid with equal nested rows between columns

Question

I am using Flexbox grid css library - flexboxgrid.com and doing a three column layout. In this three column layout I will be doing nested rows in each column.

I want to achieve that the nested rows are also equal in height with all the other columns.

This is what I am currently achieving:

Current Achievement I want that section 4 is aligned exactly with section 2.

I have also done a JSFiddle to demonstrate what I am currently achieving.

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>

Any solution on how to achieve this ?

Check this https://stackoverflow.com/questions/46398498/css-how-to-have-children-in-different-parents-the-same-height/46406863#46406863 — Asons, Sep 26 '17 at 12:08
@LGSon - So I cant achieve this using the flexboxgrid css library ? — Joe Dorello, Sep 26 '17 at 12:12
@Paulie_D The CSS Grid's items still need to be sibling, right? — Asons, Sep 26 '17 at 14:16

score 0 · Answer 1 · answered Oct 01 '17 at 19:32

@Paulie_D is correct in his suggestion to use CSS grid for this. As you can see, I've added the line breaks to the 1st, 2nd and 4th item and the whole 2nd row adapted their individual heights. Hope this is the behavior you wished for:

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 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
 }
 .d {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
 }
 .f {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
 }
 .a {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
 }
 .b {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
 }
 .e {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
 }

<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>

Flexbox Grid with equal nested rows between columns

1 Answers1