A feature that lets you create named grid areas, using grid-area and grid-template-areas.
Use those names to position items on the grid like so:

header{ grid-area: header; }
footer{ grid-area: footer; }
main  { grid-area: main; }
aside { grid-area: aside; }

.container { ...
  grid-template-areas: 
  "header header"
  "main aside"
  ". footer";
}

Use a period . to leave empty spaces.

Responsive Example

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "nav" 
    "main"
    "aside"
    "footer";
}

header{ grid-area: header; }
nav   { grid-area: nav; }
main  { grid-area: main; }
aside { grid-area: aside; }
footer{ grid-area: footer; }

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px minmax(150px, auto) 100px;
    grid-template-areas: 
      "header header header"
      "nav main aside"
      "footer footer footer";
  }
}

@media (min-width: 992px) {
  .container {
    grid-template-areas: 
      "header header header"
      "nav main aside"
      "nav footer footer";
  }
}

Firefox Grid Inspector.

Firefox Grid Inspector – The Firefox web browser provides a helpful tool that lets you visualize, inspect and debug your grid layout in the browser. The Grid inspector tool overlays a representation of the grid on top of your grid container. That way you’re able to inspect your grid tracks, grid lines, gutters and more.