Tema 20 · Grid Posicionamiento

CSS Grid: Líneas, Expansión (span) y Centrado

Aprende a posicionar elementos por líneas de cuadrícula con grid-column y grid-row, fusionar múltiples celdas con span y lograr centrado bidimensional con place-items: center.

CSS Grid: Plantillas con grid-template-areas Pseudoclases y Pseudoelementos (::before, ::after)

Líneas de la Cuadrícula y la Propiedad span

En CSS Grid, las líneas divisorias se numeran automáticamente a partir de 1. Una rejilla de 3 columnas tiene 4 líneas verticales (1, 2, 3 y 4): 

/* La celda inicia en la línea 1 y termina en la línea 3 (abarca 2 columnas) */
.tarjeta-destacada {
  grid-column: 1 / 3;
}

/* Sintaxis equivalente con la palabra clave span */
.tarjeta-destacada {
  grid-column: span 2; /* Se expande a lo ancho de 2 columnas */
  grid-row: span 2;    /* Se expande verticalmente a lo alto de 2 filas */
}

Alineación y Centrado Total con place-items

CSS Grid ofrece el método más rápido y compacto de toda la historia de la web para centrar cualquier elemento horizontal y verticalmente al mismo tiempo: 

.contenedor-centrado {
  display: grid;
  place-items: center; /* Centra en ambos ejes de forma simultánea */
  min-height: 200px;
}
  • justify-items: Controla la alineación horizontal de todas las celdas (start, end, center, stretch).
  • align-items: Controla la alineación vertical de todas las celdas (start, end, center, stretch).
  • place-items: Es el shorthand que combina align-items y justify-items en una sola declaración.

⚡ Cuadrícula Tipo Revista con Elemento Destacado (span 2)

Observa cómo la tarjeta principal de noticias ocupa 2 columnas y 2 filas (span 2), mientras que las demás celdas se ajustan naturalmente a su alrededor:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid: Posicionamiento y Span</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      margin: 0;
      padding: 25px;
      color: #0f172a;
    }

    /* Cuadrícula tipo mosaico */
    .mosaico-noticias {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 130px;
      gap: 15px;
      max-width: 820px;
    }

    .noticia {
      background: white;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Tarjeta destacada que ocupa 2 columnas y 2 filas */
    .noticia-destacada {
      grid-column: span 2;
      grid-row: span 2;
      background: linear-gradient(135deg, #1e40af, #3b82f6);
      color: white;
      border: none;
      padding: 24px;
    }

    /* Contenedor con centrado instantáneo */
    .caja-centrada {
      display: grid;
      place-items: center;
      background: #eff6ff;
      border: 2px dashed #93c5fd;
      border-radius: 10px;
      font-weight: bold;
      color: #1e40af;
      text-align: center;
    }

    h4 { margin: 0 0 6px 0; }
    p { margin: 0; font-size: 0.85rem; opacity: 0.9; }
  </style>
</head>
<body>

  <h3>Mosaico con grid-column: span 2 y place-items: center</h3>

  <div class="mosaico-noticias">
    <!-- Destacado grande -->
    <div class="noticia noticia-destacada">
      <span style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; background: rgba(255,255,255,0.2); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 12px; width: fit-content;">
        Noticia Principal · span 2x2
      </span>
      <h2 style="margin: 0 0 10px 0;">Lanzamiento de CSS Grid 2.0 en Kilopolis</h2>
      <p style="font-size: 1rem; line-height: 1.5;">
        Aprende a maquetar dashboards interactivos y revistas digitales utilizando celdas expansibles sin trucos ni flotaciones obsoletas.
      </p>
    </div>

    <!-- Celdas secundarias -->
    <div class="noticia">
      <h4>Tutorial 1</h4>
      <p>Selectores de atributo modernos</p>
    </div>

    <div class="noticia">
      <h4>Tutorial 2</h4>
      <p>Variables y temas oscuro/claro</p>
    </div>

    <!-- Celda centrada con place-items: center -->
    <div class="caja-centrada">
      place-items: center<br>
      <span style="font-size: 0.75rem; font-weight: normal;">Centrado bidimensional en 1 línea</span>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de CSS3, Flexbox y Grid y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.