The grid-area & grid-template-areas properties

The grid-template-areas property helps set up a grid layout. Class item Gbox1 has a grid-area property which we choose to define as “GA1” and will take up the place of 2/5 colums, with following syntax:

grid-template-areas:"GA1 GA1 . . ."
.Gbox1            {grid-area: GA1;}
.Gbox3            {grid-area: 2 / 1 / span 2 / span 3;}
.grid-container1  {display: grid;  grid-template-areas:'GA1 GA1 . . .'; grid-gap: 7px;  background-color:rgba(120,140,210,0.5);  padding: 8px;}
.grid-container3  {display: grid;  grid-template-columns: auto auto auto auto; grid-gap: 7px;  background-color:rgba(120,210,180,0.5);  padding: 8px;}

.grid-container1,2,3 etc. > div {background-color: rgba(255,255,255,0.7); text-align: center; padding: 20px 0; font-size: 30px;}

grid-template-areas

1 .Gbox1 {grid-area: GA1;}
Hydroxycholorquine
Replication
Replication
4
Replication
Replication
7
8
Replication

grid-template-areas

1
2
3 .Gbox2 | {..; g-t-a : “. . GA2 GA2 GA2”; ..}
4
5
6
7
8

Different method. grid-template-columns (auto), instead of grid-template-areas and display is managed in the .grid-area: Row start | Col start | span Row end | span Col end

1 .Gbox3 { grid-area: 2 / 1 / span 2 / span 3; }
Syntax:    grid-row-start (2) / grid-column-start (1) / grid-row-end (2) / grid-column-end (3)
Gbox3 will start on row 2 and column 1, and span 2 rows and 3 columns:
2
3
4
5
6
7
1 What happens if 1 grows and grows and grows in text (< max 50%)
2 .Gbox4 { 1 / 2 / span 1 / span 3; }
Syntax:    grid-row-start (1) / grid-column-start (2) / grid-row-end (1) / grid-column-end (3)
Gbox4 will start on row 1 and column 2, and span 1 row and 3 column:
3
4
5
6