SOURCE

<div class="area">
    <div class="g"></div>
    <div class="o_"></div>
    <div class="o"></div>
    <div class="g_"></div>
    <div class="l"></div>
    <div class="e"></div>
</div>

.area {
    display: grid;
    width: calc(5 * 60px);
    height: calc(5 * 60px);
    background: transparent;
    grid-template-rows: repeat(5, 60px);
    grid-template-columns: repeat(5, 60px);
    grid-template-areas: ".  g  g  g  . " " o_ .  .  .  . " "o  .  e  e  . " "o  .  .  .  l " ".  g_ g_ g_ . ";
}
.g {
    grid-area: g;
    background: #ea4335;
}
.o_ {
    grid-area: o_;
    background: #ff9800;
}
.o {
    grid-area: o;
    background: #fbbc05;
}
.g_ {
    grid-area: g_;
    background: #34a853;
}
.l {
    grid-area: l;
    background: #00bcd4;
}
.e {
    grid-area: e;
    background: #4285f4;
}