.grid-container {

  display: grid;

height: 100vh;

grid-gap: 5px;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

  grid-template-rows: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

  grid-template-areas: "a1 a2 a2 a3 a4 a5" "a6 a2 a2 a3 a4 a10" "a6 a7 . a3 a9 a10" "a12 a7 a8 a8 a9 a11" "a12 a7 a8 a8 . a11" "a12 . a8 a8 a21 a21" "a13 a13 a8 a8 a21 a21" "a13 a13 a18 a20 a21 a21" "a14 a16 a18 a20 a22 a23" "a14 a16 a19 a20 a22 a23" "a15 a17 a19 . a22 a23" "a15 a17 . . a22 ." ". a17 . . . .";

}

​

.grid-container div{

  background-color: green;

border: solid 1px black;

border-radius: 7px;

}

.a1 { grid-area: a1; }

​

.a2 { grid-area: a2; }

​

.a3 { grid-area: a3; }

​

.a4 { grid-area: a4; }

​

.a5 { grid-area: a5; }

​

.a6 { grid-area: a6; }

​

.a8 { grid-area: a8; }

​

.a7 { grid-area: a7; }

​

.a9 { grid-area: a9; }

​

.a10 { grid-area: a10; }

​

.a11 { grid-area: a11; }

​

.a12 { grid-area: a12; }

​

.a13 { grid-area: a13; }

​

.a14 { grid-area: a14; }

​

.a15 { grid-area: a15; }

​

.a16 { grid-area: a16; }

​

.a17 { grid-area: a17; }

​

.a18 { grid-area: a18; }

​

.a19 { grid-area: a19; }

​

.a20 { grid-area: a20; }

​

.a21 { grid-area: a21; }

​

.a22 { grid-area: a22; }

​

.a23 { grid-area: a23; }

​