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

    /* Contenedor Grid con 3 columnas fijas */
    .tablero-grid {
      display: grid;
      grid-template-columns: 180px 180px 180px;
      grid-template-rows: 90px 90px;
      gap: 15px;
      background-color: #e2e8f0;
      padding: 18px;
      border-radius: 12px;
      max-width: 600px;
      margin-bottom: 20px;
    }

    /* Celdas de la cuadrícula */
    .celda-grid {
      background: linear-gradient(135deg, #0284c7, #2563eb);
      color: white;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.1rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <h3>Rejilla Bidimensional de 3 Columnas x 2 Filas</h3>
  <p style="color: #64748b; font-size: 0.95rem;">
    Estructurada con <code>grid-template-columns: 180px 180px 180px</code> y <code>gap: 15px</code>:
  </p>

  <div class="tablero-grid">
    <div class="celda-grid">Módulo 1</div>
    <div class="celda-grid">Módulo 2</div>
    <div class="celda-grid">Módulo 3</div>
    <div class="celda-grid">Módulo 4</div>
    <div class="celda-grid">Módulo 5</div>
    <div class="celda-grid">Módulo 6</div>
  </div>

</body>
</html>