HTML
<div class="container"> <div class="item a">A</div> <div class="item b">B</div> <div class="item c">C</div> <div class="item d">D</div> <div class="item e">E</div> <div class="item f">F</div> <div class="item g">G</div> </div>
CSS
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
}
.container {
width: 70vw;
height: 43.2632880099vw;
border: 0.5px solid #4A4949;
display: grid;
grid-template-columns: 61.8% 9.02% 5.58% 23.6%;
grid-template-rows: 61.8% 9.02% 5.58% 23.6%;
grid-template-areas: "A B B B" "A E F C" "A E G C" "A D D C";
}
.item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
color: #F2F2F2;
font-size: 1.5em;
font-weight: 700;
text-shadow: 1px 1px 1px #878787;
box-sizing: border-box;
border: 0.5px solid #4A4949;
}
.item.a {
grid-area: A;
background-color: #a0ddff;
}
.item.b {
grid-area: B;
background-color: #c1cefe;
}
.item.c {
grid-area: C;
background-color: #758ecd;
}
.item.d {
grid-area: D;
background-color: #7189ff;
}
.item.e {
grid-area: E;
font-size: 1.2em;
background-color: #624cab;
}
.item.f {
grid-area: F;
font-size: 1em;
background-color: #5d2e8c;
}
.item.g {
grid-area: G;
font-size: 0.7em;
background-color: #7a7a7a;
}
{ } JS
Preview