How can I make a div span 2 rows

Question

I am trying to do exactly this:

Where my mark up is:

 <div>
   <div>A</div>
   <div>B</div>
   <div>C</div>
</div>

Is this possible with grid, bootstrap or flex? Without changing the order of elements?

Answer 1

I think it has a lot of way to do.

And one of that way is using grid. then use grid-template for solve this question

.container {
  display: grid;
  grid-template:
    "a b"
    "c b";
}

.a {
  grid-area: a;
  background: red;
}

.b {
  grid-area: b;
  background: blue;
}

.c {
  grid-area: c;
  background: green;
}

or using grid-area

.container {
  display: grid;
}

.a {
  background: red;
}

.b {
  grid-area: 1 / 2 / 3;
  background: blue;
}

.c {
  background: green;
}

Answer 2

.wrapper {
  height: 300px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}

.wrapper div {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper div:nth-child(1) {
  background-color: green;
}

.wrapper div:nth-child(2) {
  grid-row: 2 span;
  background-color: blue;
}

.wrapper div:nth-child(3) {
  background-color: red;
}

<div class="wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Is that something you wanted to achive ? "Grid" is kind of made for this kind of situations.

As for bootstrap - last version uses "flex" as default.

Answer 3

Using one more div will be the solution, do the following.

Hope it is useful.

https://codepen.io/Olmedo12/pen/WNdGOMB

HTML

<div class="container">
      <div class="subcontainer">
        <div class="box blue">BOX 1</div>
        <div class="box red">BOX 3</div>
      </div>
      <div class="box green">
         Box 2
      </div>
    <div>

CSS

.container {
  display: flex;
}

.box {
  width: 60px;
  height: auto;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}