<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
width: 800px;
height: 600px;
background-color: grey;
margin: 0 auto;
display: flex;
}
.Grid {
display: flex;
height: 100px;
width: 100%;
background-color: #0F769F;
}
.Grid-cell {
flex: 1;
height: 200px;
background-color: saddlebrown;
margin: 5px;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
/*.Grid-cell.u-1of3 {*/
/*flex: 0 0 33.3333%;*/
/*}*/
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
</style>
</head>
<body>
<div class="content">
<div class="Grid">
<div class="Grid-cell"></div>
<div class="Grid-cell u-1of4"></div>
<div class="Grid-cell u-1of2"></div>
</div>
</div>
</body>
</html>