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

.head { grid-area: head; text-align:center; border:inset; border-color:red; background-color: lightgrey;}

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

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

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

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

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

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

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