.container { margin:auto; width:60%; height: 100%;  display: grid; vertical-align: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header header header header header header header header header header header header header header header header header header header header header header"
    "header header header header header header header header header header header header header header header header header header header header header header header header"
    "header header header header header header header header header header header header header header header header header header header header header header header header"
    "header header header header header header header header header header header header header header header header header header header header header header header header"
    ". . . . . . . . . . . . . . . . . . . . . . . ."
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . book1 book1 book1 book1 . book2 book2 book2 book2 . book3 book3 book3 book3"
    "box box box box box box box box box . . . . . . . . . . . . . . ."
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6"
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6"
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6"
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6"
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6"
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6"
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6"
    "box box box box box box box box box . book4 book4 book4 book4 . book5 book5 book5 book5 . book6 book6 book6 book6";
    
}

.header { grid-area: header;border:inset; border-color:red; background-color:grey; }

.box { grid-area: box;border:inset; border-color:red; background-color:grey; }

.book1 { grid-area: book1;border:inset; border-color:red; background-color:grey; }

.book2 { grid-area: book4;border:inset; border-color:red; background-color:grey; }

.book3 { grid-area: book2;border:inset; border-color:red; background-color:grey; }

.book4 { grid-area: book3;border:inset; border-color:red; background-color:grey; }

.book5 { grid-area: book5;border:inset; border-color:red; background-color:grey; }

.book6 { grid-area: book6;border:inset; border-color:red; background-color:grey; }