CSS Grid

Основы

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;    /* 3 равных столбца */
  grid-template-columns: repeat(3, 1fr); /* то же самое */
  grid-template-columns: 200px 1fr 2fr;  /* смешанные единицы */
  gap: 20px;                             /* отступы */
}

/* Элемент занимает 2 столбца */
.featured {
  grid-column: span 2;
}

Auto-fill vs Auto-fit

/* Столько карточек, сколько поместится (мин 250px) */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Named Areas

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
header { grid-area: header; }