Modern CSS Layouts Every Developer Should Know

Why Layout Still Matters

Every beautiful website you've ever visited is built on a solid layout foundation. You can have perfect typography, stunning images, and smooth animations but if the layout breaks on mobile or the spacing feels off, none of it matters. CSS has evolved dramatically, and these are the techniques I rely on every single day.

Flexbox: The One-Dimensional Champion

Flexbox is my go-to for single-axis layouts navbars, card rows, centering content, and aligning items. The mental model is simple: you have a container and its children flow along one axis.

/* Perfect centering  the classic */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Navbar with logo left, links right */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

The key properties I use constantly: gap for spacing (stop using margins between flex children), flex-wrap: wrap for responsive rows, and flex: 1 to make an item fill remaining space.

CSS Grid: The Layout Powerhouse

Grid is for two-dimensional layouts any time you need rows AND columns working together. My portfolio's project grid, the blog listing, and the service cards all use CSS Grid.

/* Responsive card grid that adapts automatically */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Full-width featured item spanning all columns */
.card-featured {
  grid-column: 1 / -1;
}

/* Asymmetric layout: sidebar + main */
.page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}

The repeat(auto-fill, minmax()) pattern is incredibly powerful it creates a responsive grid without any media queries. The cards automatically reflow based on available space.

Clamp() for Fluid Typography

Stop writing a dozen media queries for font sizes. clamp() lets you set a minimum, preferred, and maximum value in one line:

/* Font scales smoothly from 2.5rem to 4.5rem */
h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

/* Padding that scales with viewport */
.section {
  padding: clamp(3rem, 8vw, 8rem) 2rem;
}

/* Container width with fluid behaviour */
.content {
  max-width: clamp(320px, 90vw, 720px);
  margin: 0 auto;
}

I use clamp() for headings, section padding, and container widths on literally every project. It eliminates breakpoint-specific overrides for sizing.

The Holy Trinity: A Complete Page Layout

Here's a full responsive page layout combining all three techniques this pattern works for blogs, portfolios, and landing pages:

/* Sticky header, flexible main, footer at bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* Pushes footer down */
}

/* Main content: sidebar + article */
.page-content {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (min-width: 768px) {
  .page-content {
    grid-template-columns: 250px 1fr;
    gap: 3rem;
  }
}

CSS Variables for Consistent Spacing

Every professional project I build starts with a spacing system using CSS custom properties:

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 99px;
}

Consistent spacing eliminates "it looks slightly off" feedback. When everything follows the same scale, the design feels cohesive automatically.

Patterns I Use in Every Project

• Aspect-ratio containers aspect-ratio: 16/9 for video placeholders and image cards
• Scroll-margin-top Prevents fixed headers from covering anchored sections
• Logical properties margin-inline, padding-block for cleaner, direction-aware spacing
• CSS nesting Native nesting (no preprocessor) for scoped, readable styles
• View transitions The view-transition meta tag for smooth page transitions in multi-page sites

The Bottom Line

Modern CSS is incredibly capable. If you're still reaching for Bootstrap or a CSS framework for basic layouts, try building with plain Flexbox + Grid first. You'll write less code, have more control, and actually understand what's happening under the hood.

Every layout on this portfolio site the hero, the project grid, the service cards, this blog is built with the exact techniques above. No framework, no utility classes, just clean CSS.