How to use Flex CSS and simulate a rowspan 2 and colspan 2

Question

I want to build a responsive layout with 2 rows using divs .

I try this jsbin: http://jsbin.com/jiyanayayi/edit?html,css,output

The first row will have three cells, the last one (cell 3) must have a rowspan = 2

The second row (cell4) having a colspan = 2 must be limited by the cell 3.

I tried the CSS below, but the rowspan atribute did not work.

How can I create this responsive layout format?

.row{
  display: flex;
}
.cell{
  flex: 1;
  background:#eee;
  border: 1px solid #444;
  padding: 15px;
}

The HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1 </div>
        <div class="cell">Cell 2 </div>
        <div class="cell rowspan2">Cell 3 </div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell 4</div>
    </div>
</div>

Answer 1

Edit 2021 use the grid CSS part stand inside the @supports querie, unless you still need to supports some exotic browsers or very old ones. If you are not sure, you can use the jsbin sample (also linked at the end of that answer) within the browser you want to supports. - jsbin should work and be live edited with old browsers, at least it does with IE11.

grid placement options are grid-area or grid-column and grid-row ( both links are about Grid Layout Module Level 2 from W3C ). The code below uses grid-area and you will find the grid-column and grid-row syntax commented.

Also This is not a table-layout and Question/Answers here are not about HTML table.

end edit

---

you need to use also flex and flex-wrap:

.table {
  display: flex;
  border: solid;
}

.row {
  flex: 1;
  display: flex;
}

.row:first-of-type {
  flex-flow: wrap;
}

.row .rowspan2 {
  flex: 1 1 100%;
}

.row div {
  border: solid;
  padding: 1em;
  flex: 1;
}

/* ============================================================== */
/* if display grid and contents is supported then you may use it  */
/* ============================================================== */
/*
@supports (display:grid) and (display:contents) {
  .table {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-areas: "cell1 cell2 cell3 cell3" "cell4 cell4 cell3 cell3";
    border: solid;
  }
  .row {
    display: contents/* hide them in the structure. .row respective children become sibblings *//*
  }
  .row:first-child> :first-child {
    grid-area: cell1;
  }
  .row:first-child div {
    grid-area: cell2;
  }
  .row .cell.rowspan2 {
    grid-area: cell3;
    /*grid-row:span 2; no need if grid-template-area is complete*//*
  }
  div div {
    border: solid;
    padding: 1em;
  }
  .colspan2 {
    grid-area: cell4;
    /*grid-column : span 2; no need if grid-template-area is complete*//*
  }
}
*/

<div class="table">
  <div class="row">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell rowspan2">Cell 3</div>
  </div>
  <div class="row">
    <div class="cell colspan2">Cell 4</div>
  </div>
</div>

jsbin updated with @supports uncommented : https://jsbin.com/wexisiyamo/1/edit?html,css,output