Dominar CSS Grid con Claude Code

Usa CSS Grid como plano de la página

CSS Grid es un sistema de layout en dos dimensiones. Flexbox suele ser mejor para una fila o columna dentro de un componente; Grid es mejor para la estructura de una página: header, sidebar, contenido, footer, cards, pricing y bloques de CTA.

El modelo mental básico es este: el contenedor grid es el elemento con display: grid; los grid items son sus hijos directos; un track es una fila o columna. grid-template-areas da nombres legibles a las regiones. minmax() define tamaño mínimo y máximo. auto-fit crea tantas columnas como quepan y estira las cards existentes.

Lee esta guía junto con diseño responsive, patrones Flexbox, variables CSS y accesibilidad. Referencias oficiales: MDN CSS Grid Layout, grid-template-areas, minmax() y repeat().

Qué pedirle a Claude Code

No pidas solo “hazlo responsive”. Define regiones, anchos mínimos, puntos de prueba y restricciones de negocio. En un sitio de contenido, el CTA, los bloques de código, los anuncios y el texto no deben desbordar a 360px.

Necesidad	Instrucción para Claude Code	Por qué importa
Regiones	header, sidebar, main, footer, cta	hace legibles las grid-template-areas
Mínimos	cards de 280px, texto cerca de 65ch	evita texto aplastado
Fluidez	auto-fit y minmax()	reduce breakpoints frágiles
Verificación	360, 768, 1024, 1440px	detecta overflow real
Monetización	CTA y enlaces de producto visibles	protege la conversión

HTML listo para copiar

<div class="dashboard-shell">
  <header class="site-header">
    <a class="brand" href="/">ClaudeCodeLab</a>
    <nav class="top-nav" aria-label="Primary">
      <a href="/es/blog/claude-code-responsive-design">Responsive</a>
      <a href="/es/blog/claude-code-flexbox-patterns">Flexbox</a>
      <a href="/en/training/">Training</a>
    </nav>
  </header>

  <aside class="sidebar" aria-label="Sections">
    <a href="#cards">Cards</a>
    <a href="#pitfalls">Errores</a>
    <a href="#cta">CTA</a>
  </aside>

  <main class="content">
    <section class="hero-panel">
      <p class="eyebrow">CSS Grid guide</p>
      <h1>Layouts estables para artículos y dashboards</h1>
      <p>Named areas, minmax y auto-fit mantienen una misma estructura HTML en varios anchos.</p>
    </section>

    <section id="cards" class="card-grid" aria-label="Use cases">
      <article class="card">
        <h2>Archivo de artículos</h2>
        <p>Las cards conservan legibilidad y cambian de columnas automáticamente.</p>
        <a href="/es/blog/claude-code-css-grid-mastery">Ver checklist</a>
      </article>
      <article class="card">
        <h2>Pricing</h2>
        <p>Los CTA quedan alineados para comparar planes sin fricción.</p>
        <a href="/en/products/">Ver templates</a>
      </article>
      <article class="card">
        <h2>Dashboard</h2>
        <p>Las áreas con nombre hacen claro el orden móvil.</p>
        <a href="/en/training/">Consultar rollout</a>
      </article>
    </section>
  </main>

  <footer class="site-footer" id="cta">
    <p>Para adaptarlo a tu repo: <a href="/en/training/">Claude Code training y consultoría</a>.</p>
  </footer>
</div>

CSS con grid-template-areas, minmax y auto-fit

.dashboard-shell {
  --page-gap: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: var(--page-gap);
  min-height: 100svh;
  padding: var(--page-gap);
}

.site-header { grid-area: header; }
.sidebar { grid-area: sidebar; align-self: start; position: sticky; top: 1rem; }
.content { grid-area: content; min-width: 0; }
.site-footer { grid-area: footer; border-top: 1px solid #d7dee8; padding-block-start: 1rem; }

@media (width < 768px) {
  .dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }

  .sidebar { position: static; }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  min-width: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 1rem;
}

min-width: 0 evita que URLs largas, tablas o bloques de código empujen el layout fuera del viewport. Para cards editoriales o de pricing, auto-fit suele ser mejor que auto-fill porque colapsa columnas vacías y usa el espacio disponible.

Componente Astro

---
const items = [
  { title: "Diseño responsive", body: "Prueba varios viewports antes de publicar.", href: "/es/blog/claude-code-responsive-design" },
  { title: "Patrones Flexbox", body: "Usa Flexbox en controles internos de una dimensión.", href: "/es/blog/claude-code-flexbox-patterns" },
  { title: "Variables CSS", body: "Convierte espacios y anchos en tokens.", href: "/es/blog/claude-code-css-variables" }
];
---

<section class="related-grid" aria-label="Related guides">
  {items.map((item) => (
    <article class="related-card">
      <h2>{item.title}</h2>
      <p>{item.body}</p>
      <a href={item.href}>Leer guía</a>
    </article>
  ))}
</section>

<style>
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
  }

  .related-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    padding: 1rem;
  }
</style>

Cards en React / TSX

type ResourceCard = {
  title: string;
  description: string;
  href: string;
  cta: string;
};

const resources: ResourceCard[] = [
  {
    title: "Revisión CSS Grid",
    description: "Revisa areas, minmax, overflow y cards móviles.",
    href: "/es/blog/claude-code-css-grid-mastery",
    cta: "Checklist"
  },
  {
    title: "Claude Code training",
    description: "Convierte prompts, reglas de review y verificación en flujo de equipo.",
    href: "/en/training/",
    cta: "Consultar"
  },
  {
    title: "Templates",
    description: "Empieza con CLAUDE.md y prompts de review reutilizables.",
    href: "/en/products/",
    cta: "Ver productos"
  }
];

export function ResourceGrid() {
  return (
    <section className="resource-grid" aria-label="CSS Grid resources">
      {resources.map((resource) => (
        <article className="resource-card" key={resource.href}>
          <h2>{resource.title}</h2>
          <p>{resource.description}</p>
          <a href={resource.href}>{resource.cta}</a>
        </article>
      ))}
    </section>
  );
}

Casos de uso y errores frecuentes

Caso uno: archivo de artículos con títulos de distinta longitud. auto-fit + minmax() evita CSS rígido por breakpoint. Caso dos: página de precios, donde el CTA debe quedar visible porque afecta ingresos. Caso tres: dashboard interno con sidebar, filtros y tabla. Caso cuatro: galería de medios, donde aspect-ratio reduce saltos de layout al cargar imágenes.

Errores concretos: tres columnas fijas en móvil, olvidar min-width: 0, escribir mal nombres de area y usar Grid para cada alineación pequeña. Usa Grid para la estructura y Flexbox dentro de botones, navegación y controles.

Después de la implementación, pide a Claude Code una revisión de overflow horizontal, visibilidad del CTA, scroll de bloques de código, navegación por teclado y enlaces internos. Para contenido monetizado, verifica también que los enlaces a productos y consultoría sigan visibles en móvil. Claude Code training y los template products ayudan a convertir esta revisión en proceso repetible.

Resumen

CSS Grid práctico no consiste en usar todas las propiedades. Usa grid-template-areas para legibilidad, minmax() para proteger tamaños mínimos y auto-fit para cards responsivas. Con restricciones claras, Claude Code puede generar y revisar layouts que sobreviven a contenido real, no solo a capturas perfectas.