CSS DIV Layout over Grid - css

Question

Is it possible to get this Layout using div's

Answer 1

You could do this with floats and negative margin-top on .e. With masonry you don't need margin-top DEMO
* {
box-sizing: border-box;
}
.content {
width: 200px;
height: 200px;
border: 1px solid black;
}
.item {
border: 1px solid black;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.a,
.d {
width: 33.3333333%;
height: 66.67%;
}
.b,
.e {
width: 66.67%;
height: 33.3333333%;
}
.e {
margin-top: -33.3333333%;
}
.c {
width: 33.3333333%;
height: 33.3333333%;
}
<div class="content">
<div class="a item">a</div>
<div class="b item">b</div>
<div class="c item">c</div>
<div class="d item">d</div>
<div class="e item">e</div>
</div>

Answer 2

Yes it is possible.
I made a fast snippet for you. Using position: absolute.
* {
padding: 0;
margin: 0;
}
.container {
width: 150px;
height: 150px;
}
.a {
position: absolute;
height: 100px;
width: 50px;
background-color: #CCC;
}
.b {
position: absolute;
left: 50px;
height: 50px;
width: 100px;
background-color: #C2C2C2;
}
.c {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
background-color: #EEE;
}
.d {
position: absolute;
left: 100px;
top: 50px;
height: 100px;
width: 50px;
background-color: #F0F0F0;
}
.e {
position: absolute;
left: 0px;
top: 100px;
width: 100px;
height: 50px;
background-color: #DDD;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>

Answer 3

Try this code using table
table {
border-collapse: collapse;
border: 1px solid black;
}
table, td, th {
border: 1px solid black;
}
td
{
padding:10px;
}
<table >
<tr>
<td rowspan="2">A</td>
<td colspan="2">B</td>
</tr>
<tr>
<td>C</td>
<td rowspan="2">D</td>
</tr>
<tr>
<td colspan="2">E</td>
</tr>
</table>

Answer 4

try this code
<div class="wrapper">
<div class="a"><span>A</span></div>
<div class="b"><span>B</span></div>
<div class="c"><span>C</span></div>
<div class="d"><span>D</span></div>
<div class="e"><span>E</span></div>
</div>
CSS code
span{
position: absolute;
top: 30%;
left: 25%;
}
a {
position: absolute;
height: 100px;
width: 50px;
background-color:#f2f2f2;
border:solid 1px #333;
}
.b {
position: absolute;
left: 50px;
height: 50px;
width: 100px;
background-color:#d9d9d9;
border:solid 1px #333;
}
.c {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
background-color:#bfbfbf;
border:solid 1px #333;
}
.d {
position: absolute;
left: 100px;
top: 50px;
height: 100px;
width: 50px;
background-color:#a6a6a6;
border:solid 1px #333;
}
.e {
position: absolute;
left: 8px;
top: 100px;
width: 91px;
height: 50px;
background-color:#808080;
border: solid 1px #333;
}
Link for above code here https://jsfiddle.net/romesh60/odo4r5aq/2/