Переменные в CSS — Работа с CSS Grid и Flexbox

.grid-container {
  --column-width: 250px;
  --gap-size: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
  gap: var(--gap-size);
}

.grid--wide {
  --column-width: 400px;
}

.grid--narrow {
  --column-width: 180px;
  --gap-size: 8px;
}