Modern Layouts with CSS Grid

Project structure

The HTML/CSS template is intentionally small and readable. In the Codevre browser code editor, open:

• /index.html — layout markup + card content
• /style.css — CSS Grid patterns, spacing rules, reusable component styles

Step 1 — Spacing rules that scale cleanly

Modern layouts stay clean when spacing is consistent. Define a small spacing scale with CSS variables and use clamp() so spacing adapts across screen sizes (responsive spacing without tons of breakpoints).

:root {
  --content-max: 1100px;

  /* responsive spacing tokens */
  --s-1: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --s-2: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
  --s-3: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --s-4: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);

  --radius: 16px;
  --border: 1px solid rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--s-4);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  background: #0b1020;
}

Step 2 — Responsive grid patterns with auto-fit + minmax()

A classic responsive CSS Grid pattern is repeat(auto-fit, minmax(...)). It creates as many columns as will fit, and automatically collapses to fewer columns on smaller screens. This is a go-to approach for responsive card grids in modern web layout.

.page-shell {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--s-4);
}

.grid {
  display: grid;
  gap: var(--s-3);

  /* responsive grid pattern */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
}

<div class="page-shell">
  <header class="hero stack">
    <h1>Modern Layouts with CSS Grid</h1>
    <p>Responsive grid patterns, spacing rules, and reusable cards that scale cleanly.</p>
  </header>

  <section class="grid" aria-label="Responsive card grid">
    <article class="card">...</article>
    <article class="card">...</article>
    <article class="card">...</article>
  </section>
</div>

Step 3 — Layout rhythm with a reusable .stack utility

Use one tiny utility to create consistent vertical spacing in components. This keeps pages clean and prevents “random margin” chaos (a common issue in responsive layout).

.stack > * + * {
  margin-top: var(--s-2);
}

.hero {
  padding: var(--s-4);
  border: var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(110,125,255,0.18), rgba(255,120,180,0.12));
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: -0.02em;
}

.hero p {
  margin: 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.78);
}

Step 4 — Reusable card components that scale

Cards are everywhere: marketing sections, docs pages, dashboards. Build a card component with a predictable internal layout (title, body, footer). This makes the grid feel consistent and “designed” at any screen size.

.card {
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.04);

  display: grid;
  gap: var(--s-2);
  grid-template-rows: auto 1fr auto;
  min-height: 180px;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.card-body {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.86);
  font-size: 0.9rem;
}

Quick edits (make it yours)

Dense grid for dashboards

.grid--dense {
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.card--tight {
  padding: var(--s-2);
  min-height: 160px;
}

Featured card (spans columns)

.card--featured {
  background: linear-gradient(135deg, rgba(110,125,255,0.22), rgba(255,175,80,0.10));
}

@media (min-width: 860px) {
  .card--featured { grid-column: span 2; }
}

FAQ: CSS Grid in a browser IDE

What’s the best responsive CSS Grid pattern for cards?

Use repeat(auto-fit, minmax(min(100%, 260px), 1fr)). It’s a modern responsive grid pattern that collapses gracefully from desktop to mobile without lots of breakpoints.

Should I use margins or gap for grid spacing?

Prefer gap for spacing between grid items. Then use a .stack utility for vertical spacing inside components. This keeps spacing consistent and scalable.

Why build CSS Grid layouts in Codevre?

Codevre is a fast browser IDE for HTML and CSS. You can prototype responsive layouts quickly, iterate visually, and share a link—great for coding online and teaching modern CSS.

Next steps

Next, try adding container queries, a small button/badge component set, or a card “details” view. The same grid patterns and spacing rules apply everywhere—especially in a Codevre browser code editor where you can iterate fast and share results.