Flex Layout mixing rows and column

Question

I can make this layout using float easily. but having hard time to do with flex box.

css :

    .a {
      background: red;
      float: left;
      width: 30%;
      height: 100px;
    }

    .b,
    .c {
      background: green;
      overflow: hidden;
      height: 45px;
    }

    .b {
      margin-bottom: 10px;
    }

    .c {
      background: lightblue
    }

html:

    <div class="a">column</div>
    <div class="b">row1</div>
    <div class="c">row2</div>

many thanks in advance.

Are you using a front-end framework i.e. bootstrap / foundation? — billy.farroll, May 23 '18 at 07:39

Fabrizio Calderan · Accepted Answer · 2018-05-25T08:44:09.783

Flexbox codepen demo

How does it work?

Wrap your columns in a common parent (e.g. a main element) with an height set. Then place your elements with flex-direction: column and create a space between b and c with justify-content: space-between.

The height of the column a is 100% of the container so b and c can shift into a new column thanks to flex-wrap: wrap.

CSS

main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100px;
}



.a {
  background: red;
  height: 100%;
  width: 30%;
}

.b, .c {
  background: green;
  height: 45px;
  width: 70%;
}

.c {
  background: lightblue
}

Grid Layout demo

How does it work?

With Grid Layout you could achieve the same thing by creating a layout with 10 columns and 2 rows and a gap between b and c with row-gap: 10px. Then adjust all the various (column|row)-(start|end)

CSS

main {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   row-gap: 10px;
   width: 100%;
}

.a {
    background: red;
    grid-area: 1 / 1 / 3 / 3;
}

.b,
.c {
  grid-column: 3 / 11;      
  background: green;
  overflow: hidden;
  height: 45px;
}

.b {
  grid-row-start: 1;
}

.c {
  grid-row-start: 2;
  background: lightblue;
}

score 3 · Answer 2 · answered May 23 '18 at 07:47

You can achieve this by using grid by wrapping a,b,c in a grid-container

.grid-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.a {
      background: red;
    /* width: 30%; */
    height: 100px;
    grid-row-start: 1;
    grid-row-end: 3;
    }

    .b,
    .c {
      background: green;
      overflow: hidden;
      height: 45px;
    }

    .b {
      margin-bottom: 10px;
    }

    .c {
      background: lightblue;
    }

<div class="grid-container">
  <div class="a">column</div>
  <div class="b">row1</div>
  <div class="c">row2</div>
</div>

Flex Layout mixing rows and column

2 Answers2

Linked