Using CSS grid system to do this!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mondrian Project</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
.container {
display: grid;
width: 748px;
height: 748px;
grid-template-columns: 320px 198px 153px 50px;
grid-template-rows: 414px 130px 155px 22px;
gap: 9px;
background-color: #000;
}
.box1{
background-color: #E72F24;
}
.box2 {
background-color: #F0F1EC;
grid-column: span 3;
}
.box3 {
background-color: #F0F1EC;
grid-row: span 2;
}
.box4 {
background-color: #F0F1EC;
grid-column: span 2;
grid-row: span 2;
}
.box5{
background-color: #004592;
border-bottom: 10px solid #000;
}
.box6{
background-color: #F0F1EC;
grid-row: span 2;
}
.box7{
background-color: #F0F1EC;
}
.box8 {
background-color: #F9D01E;
}
.box9{
background-color: #232629;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
</body>
</html>
Here is result!
Top comments (0)