CSS

.container {
  display: flex;
  flex-direction: row;       /* row | column */
  justify-content: center;   /* Main axis */
  align-items: center;       /* Cross axis */
  gap: 1rem;
  flex-wrap: wrap;
}

.item {
  flex: 1;                   /* Grow equally */
  flex: 0 0 200px;           /* Fixed width */
  align-self: flex-start;    /* Override alignment */
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.span-2 {
  grid-column: span 2;
}

.full-width {
  grid-column: 1 / -1;
}

/* Named areas */
.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

:root {
  --color-primary: #3b82f6;
  --color-bg: #0f172a;
  --spacing-md: 1rem;
  --radius: 0.5rem;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

/* Override in context */
.dark {
  --color-bg: #000;
}