Learn CSS3: Style the Modern Web

1. Flexbox for One-Dimensional Layout

Use Flexbox when items flow in a row or a column.

.row {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

2. Grid for Two-Dimensional Layout

When you need rows and columns, reach for Grid.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

3. Custom Properties (CSS Variables)

Theme tokens, dark mode, runtime customization — all with one feature.

:root {
  --primary: #1a1a1a;
  --radius: 12px;
}
.button {
  background: var(--primary);
  border-radius: var(--radius);
}

4. Responsive Design

• Mobile-first: write base styles for small screens, override with @media (min-width: ...).
• Use clamp() for fluid typography.
• Prefer logical properties (margin-inline) over directional ones.
• Container queries for component-level responsiveness.