Смешивание строк и столбцов в Flex Layout

Flexbox codepen demo

Как это работает?

Оберните свои столбцы в общий родительский элемент (например, элемент main) с установленной высотой. Затем разместите свои элементы с помощью flex-direction: column и создайте пространство между b и c с помощью justify-content: space-between.

Высота столбца a равна 100% контейнера, поэтому b и c могут перемещаться в новый столбец благодаря 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

Как это работает?

С Grid Layout вы можете добиться того же, создав макет со столбцами 10 и строками 2 и зазором между b и c с row-gap: 10px. Затем отрегулируйте все различные (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;
}

Вы можете добиться этого, используя grid, обернув a,b,c в 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>