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; }