Grid Line-based Placement

grid-column-start/end
grid-row-start/end

Example:

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 100px minmax(100px, 1fr) 100px; 
  grid-gap: 100px;
}
header {
  grid-column-start: 1;
  grid-column-end: 3;
}
footer {
  grid-column-start: 2;
  grid-column-end: 3;
}
main {
  grid-column-start: 2;
  grid-column-end: 4;
}

Negative Grid Line-based Placement

Column Examples
Stretch from first to last grid line.

.wrapper {
  grid-column-start: 1;
  grid-column-end: -1;
}

Rows Examples
Stretch from first line to line before the last.

.wrapper {
  grid-row-start: 1;
  grid-row-end: -2;
}

Using negative grid line-based placement makes your layout more adaptable for when you want to add more elements to it.

Shorthand of Start and End Lines

grid-row and grid-column let you use grid line numbers to control how items are placed on the grid.

Examples

• grid-column: 1/4;
• grid-column: 1/-1;
• grid-rows: 1/-2;