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
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:
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:
Gbox4 will start on row 1 and column 2, and span 1 row and 3 column:
3
4
5
6