Modern CSS

Modern Layout Patterns

Build common page structures such as hero sections, card grids, and sidebar layouts with reusable modern CSS patterns.

By TechCoder TeamLast updated: 2026-06-02
In a Nutshell

Build common page structures such as hero sections, card grids, and sidebar layouts with reusable modern CSS patterns. This hands-on tutorial focuses on practical implementation of modern layout patterns concepts.

Modern Layout Patterns

Once you know Flexbox, Grid, and responsive sizing, the next step is combining them into repeatable interface patterns.

Pattern 1: Centered Container

.container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

Use this on sections, navbars, and content wrappers.

Pattern 2: Auto-Fit Card Grid

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

This creates a responsive grid without hard-coding the number of columns.

Pattern 3: Split Hero

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

Pattern 4: Sticky Sidebar

.sidebar {
  position: sticky;
  top: 1.5rem;
}

Use sticky positioning for documentation menus, filters, and table-of-contents panels.

Pattern Rules That Scale

  • keep containers reusable
  • separate layout classes from component classes
  • let content size itself before forcing heights
  • test narrow screens early, not last

Next Step

Continue to CSS Variables and Theming to make design choices reusable across the full app.