Modern CSS Techniques: From Flexbox to Container Queries

The Evolution of CSS Layout

CSS has evolved dramatically over the past few years. Modern CSS provides powerful tools for creating complex, responsive layouts without relying on JavaScript or CSS frameworks.

Flexbox for One-Dimensional Layouts

Flexbox excels at distributing space along a single axis:

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

.item {
  flex: 1;
}

Common Flexbox Patterns

Centering content:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navigation bar:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

CSS Grid for Two-Dimensional Layouts

Grid is perfect for complex layouts:

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

Advanced Grid Techniques

Named grid areas:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Container Queries

Container queries allow styles based on parent size:

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

CSS Custom Properties

Variables that cascade and can be updated dynamically:

:root {
  --primary-color: #3b82f6;
  --spacing-unit: 1rem;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}

Conclusion

Modern CSS provides all the tools needed for complex, responsive layouts. Master these techniques to build better user interfaces.

---

Want to improve your CSS skills? Contact us for training opportunities.