Modern CSS Techniques: Grid, Flexbox, and Advanced Layouts

Modern CSS has evolved significantly, offering powerful layout tools and features that make responsive design easier and more flexible than ever.

CSS Grid

CSS Grid is the most powerful layout system in CSS:

Basic Grid

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

Responsive Grid

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

Grid Areas

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

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

Flexbox

Flexbox excels at one-dimensional layouts:

Centering

.container {
  display: flex;
  justify-content: center; /* Horizontal */
  align-items: center; /* Vertical */
}

Space Distribution

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

Responsive Flex

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item {
  flex: 1 1 300px; /* grow, shrink, basis */
}

Container Queries

Container queries allow styling based on container size:

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

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

CSS Variables

CSS custom properties enable dynamic theming:

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

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

.dark {
  --primary-color: #60a5fa;
}

Modern Selectors

:has() Selector

/* Style parent based on child */
.card:has(.featured) {
  border: 2px solid gold;
}

/* Style based on sibling */
.input:has(+ .error) {
  border-color: red;
}

:is() and :where()

/* :is() - Specificity of most specific selector */
:is(h1, h2, h3) {
  color: blue;
}

/* :where() - Zero specificity */
:where(h1, h2, h3) {
  color: blue;
}

Aspect Ratio

.image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Scroll Snap

.container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}

.item {
  scroll-snap-align: start;
}

Backdrop Filter

.modal {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}

Best Practices

1. Mobile-first - Start with mobile styles, add desktop
2. Use Grid for 2D layouts - Complex layouts
3. Use Flexbox for 1D layouts - Simple alignment
4. Leverage CSS Variables - For theming and consistency
5. Progressive enhancement - Support older browsers gracefully

Conclusion

Modern CSS provides powerful tools for creating flexible, responsive layouts. By mastering Grid, Flexbox, and new features like container queries, you can build beautiful, maintainable interfaces.