Cell Coordinates

Elements in Grid are positioned by lines, not cells. If you have 3 columns, they have 4 lines.

Properties:

• grid-column: Shorthand for start / end.
• grid-row: Same for rows.

Magic of Negative Numbers

Line -1 is always the last grid line. This is super convenient when you don't know exactly how many columns there will be, but want to stretch an element to the limit.

.header {
  grid-column: 1 / -1; /* Will stretch from first to very last line */
}