1) 1. Spalte sollte die gleiche Höhe wie die anderen haben 2
2) 1. Spalte sollte 40% Breite haben, während einander Spalten 30%
3) Zeilen in den letzten 2 Spalten sollten die gleiche Höhe 4) erste 2 Reihen sollten 40% der Höhe aufweisen, während die letzte Zeile auf 20%So markieren Sie 1 Spalte (ohne Zeilen) und 2 Spalten mit 3 Zeilen in jeder Spalte
ich ein Bild zu machen, gebunden klaren 
Vielen Dank
body, html, #fs {
width:100%;
height:100%;
margin:0;
padding:0;
}
#i1-table {
display:table;
width:100%;
height:100%;
}
#i1-trow {
display:table-row;
width:100%;
height:100%;
}
#i1-rowspan {
display: table-cell;
height:100%;
width:40%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#i1-rowcont {
display: table-cell;
height:100%;
width:60%;
}
#i1-table-in {
display:table;
width:100%;
height:100%;
}
.i1-rowcont-row1 {
display: table-row;
height:40%;
width:100%;
}
.i1-rowcont-row2 {
display: table-row;
height:20%;
width:100%;
}
.i1-cell1 {
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}
.i1-cell2 {
display: table-cell;
width:50%;
text-align:center;
vertical-align:middle;
}<div id="fs">
<div id="i1-table">
<div id="i1-trow">
<div id="i1-rowspan">
1
</div>
<div id="i1-rowcont">
<div id="i1-table-in">
<div class="i1-rowcont-row1">
<div class="i1-cell1" style="background-color:blue">
2
</div>
<div class="i1-cell1" style="background-color:yellow">
3
</div>
</div>
<div class="i1-rowcont-row1">
<div class="i1-cell1" style="background-color:gray">
4
</div>
<div class="i1-cell1" style="background-color:cyan">
5
</div>
</div>
<div class="i1-rowcont-row2">
<div class="i1-cell2" style="background-color:magenta">
6
</div>
<div class="i1-cell2" style="background-color:green">
7
</div>
</div>
</div>
</div>
</div>
</div>
</div>