How names can be added to grid lines?

You can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties.

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

Lines can have more than one name by separating them with a space:

.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [main-end content-start] 1fr ...
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines