Modern CSS: Flexbox, Grid, and Beyond

Modern CSS gives us powerful layout tools. Let's explore how to use them effectively.

Flexbox Fundamentals

Perfect for one-dimensional layouts:

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

CSS Grid

Perfect for two-dimensional layouts:

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

Modern CSS is powerful - use it!