Introduction

Modern CSS has evolved dramatically. With CSS Grid, Flexbox, custom properties and container queries, building responsive layouts is more powerful than ever.

CSS Grid for Layouts

CSS Grid is the most powerful layout system available. Use it for two-dimensional layouts — rows and columns simultaneously.

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

Flexbox for Components

Flexbox excels at one-dimensional layouts — either rows or columns. Perfect for navigation bars, card footers and button groups.

CSS Custom Properties

CSS variables make your stylesheets maintainable and themeable. Define your design tokens at the :root level and reference them throughout.

Mobile-First Approach

Always design for mobile first, then scale up. This ensures your site works perfectly on the devices most people use.