<!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>