Modern CSS Techniques

CSS has evolved tremendously in recent years. Let's explore modern techniques that make styling easier and more powerful than ever.

CSS Grid

CSS Grid is a two-dimensional layout system perfect for creating complex layouts with ease.

Basic Grid

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

Auto-Fit and Auto-Fill

Create responsive grids that adapt to available space:

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

Flexbox

Flexbox excels at one-dimensional layouts and alignment.

Centering Made Easy

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Custom Properties (CSS Variables)

CSS custom properties enable dynamic styling and theming.

:root {
  --primary-color: #667eea;
  --spacing: 1rem;
}


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

Modern Layout Patterns

Sidebar Layout

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
}

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
}

Container Queries

A game-changer for component-based styling:

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

Logical Properties

Future-proof your styles for different writing modes:

.element {
  margin-inline: 1rem;
  padding-block: 2rem;
}

Modern Selectors

:is() and :where()

Simplify complex selectors:

:is(h1, h2, h3) {
  color: var(--heading-color);
}

:has()

The "parent selector" we've always wanted:

.card:has(img) {
  display: grid;
}

Conclusion

Modern CSS provides powerful tools for creating beautiful, responsive layouts without relying on JavaScript or heavy frameworks. Embrace these techniques to write cleaner, more maintainable styles.