0603:

fr jednostka - ułamek wolnej przestrzeni w danym wierszu

grid container

display: grid
grid-template-columns: X Y X ... tworzy kolumny o szerokościach X Y Z …
grid-template-rows: X Y X ... tworzy wiersze o wysokościach X Y Z …
grid-template: rows/columns skrócona wersja rows/columns
repeat(ileRazy, X) zastępuje grid-template-columns
grid-column-gap: <rozmiar> odstęp pomiędzy kolumnami
grid-column-start: <linia> definiuje pozycję początkową elementu grid w kolumnie grid
grid-column-stop: <linia> definiuje pozycję końcową elementu grid w kolumnie grid
grid-column: 2 / 4 skrócona wersja start/stop
grid-row-gap: <rozmiar> odstęp pomiędzy wierszami
minmax(minWartość, maxWartość)

grid-template-areas:

grid-template-areas: "header header header"
"content . menu"
"footer footer footer"

grid-area

<nazwa obszaru>
<row-start> / <col-start> /
<row-end> / <col-end>

.grid{
  display: grid;
  grid-template-areas: "header header header"
  "content . menu"
  "footer footer footer";
  grid-template-columns: [pierwsza] 1fr [druga] 100px [ostatnia] 200px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.header{
  grid-area: header;
  text-align: center;
}

.article{
  grid-area: content;
}

.navigation{
  grid-area: menu;
}

.footer{
  grid-area: footer;
  text-align: center;
}

.grid__item{
  background: #845;
  grid-row-start: 1;
  grid-column-start: pierwsza;
  grid-row-end: 3;
  grid-column-end: ostatnia;
  z-index: -1;
}

.grid{
  display: grid;
  grid-template-areas: "header header header"
  "content . menu"
  "footer footer footer";
  grid-template-columns: 1fr 100px 200px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.grid__item{
  background: #845;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
  z-index: -1;
}

span x przez ile elementów ma się rozciągać komórka

.grid__item{
  background: #845;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: span 2;
  grid-column-end: span 2;
  z-index: -1;
}

Grid nie zastępuje flexa