CSS Grid con Claude Code

Implementando layouts complejos de forma concisa con CSS Grid

CSS Grid es el nucleo del diseno moderno de layouts. Con Claude Code, puedes generar codigo de layouts de cuadricula complejos de forma rapida y precisa.

Layout de cuadricula basico

> Crea un layout de dashboard con CSS Grid.
> Con 4 areas: encabezado, barra lateral, contenido principal y pie de pagina.

/* Layout de dashboard */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Responsivo: 1 columna en movil */
@media (width < 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr 40px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}

Layout automatico con auto-fill / auto-fit

/* Cuadricula de tarjetas: ajuste automatico del numero de columnas */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fit: se estira cuando hay pocos elementos */
.stretch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Punto de comparacion:
   auto-fill -> Mantiene tracks vacios (ancho de elemento fijo)
   auto-fit  -> Colapsa tracks vacios (los elementos se expanden) */

Layout tipo revista

/* Cuadricula irregular estilo revista */
.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.magazine .featured {
  grid-column: span 2;
  grid-row: span 2;
}

.magazine .wide {
  grid-column: span 2;
}

.magazine .tall {
  grid-row: span 2;
}

Uso de Subgrid

/* Alinear elementos dentro de tarjetas con Subgrid */
.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* 3 filas: titulo, cuerpo, pie */
}

.card__title {
  align-self: start;
  font-size: 1.25rem;
  font-weight: bold;
}

.card__body {
  align-self: start;
}

.card__footer {
  align-self: end;
  border-top: 1px solid #eee;
  padding-top: 0.5rem;
}

Layout avanzado con lineas nombradas

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100%)
    [content-end] minmax(1rem, 1fr)
    [full-end];
}

.page > * {
  grid-column: content;
}

.page .full-bleed {
  grid-column: full;
}

.page .wide {
  grid-column: full;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Animacion de CSS Grid

/* Transicion animada de la cuadricula */
.animated-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s ease;
}

.animated-grid.collapsed {
  grid-template-columns: 0fr 1fr;
}

.animated-grid .sidebar {
  overflow: hidden;
  min-width: 0;
}

Clases de utilidad practicas

/* Utilidades de cuadricula */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-full { grid-column: 1 / -1; }

Resumen

CSS Grid, combinado adecuadamente con Flexbox, puede manejar cualquier tipo de layout. Con Claude Code, puedes implementar con precision funciones avanzadas como subgrid y lineas nombradas. No olvides combinar con media queries para el soporte responsivo. Para la especificacion detallada de CSS Grid, consulta CSS Grid Layout Module Level 2.