Using grid line numbers
← column 250px →
↑
rows: 80px 1fr 80px
↓
← column 1fr →
#wrap {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 80px 1fr 80px;
}
.item3 {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 4;
}
Using named grid lines
#wrap {
display: grid;
grid-template-columns: 250px [ item-start ] 1fr [ item-end ];
grid-template-rows: [ item-start ] 80px 1fr 80px [ item-end] ;
}
.item2 {
grid-column: 1 / item-start ;
grid-row: 2 / item-start ;
}
.item3 {
grid-column: item-start / item-end;
grid-row: item-start / item-end;
}
item-start
item-end
item-start
item-end
Using named grid area
#wrap {
display: grid;
grid-template-columns: 250px [ item-start ] 1fr [ item-end ];
grid-template-rows: [ item-start ] 80px 1fr 80px [ item-end] ;
}
.item2 {
grid-column: 1 / item-start ;
grid-row: 2 / item-start ;
}
.item3 {
grid-area: item;
}
item-start
item-end
item-start
item-end