CSS Grid | Profe. Gatica

📍 Sección 1

¿Qué es CSS Grid?

CSS Grid es el sistema de layout bidimensional de CSS. A diferencia de Flexbox (1 dirección), Grid trabaja con filas Y columnas simultáneamente, siendo perfecto para layouts complejos de páginas completas.

✅

Flexbox vs. Grid

Flexbox: layout de componentes (navbar, cards, botones). Grid: layout de páginas completas (header, sidebar, main, footer).

CSS — Activar Grid

.contenedor {
  display: grid;  /* ¡Activa el grid en los hijos! */
}

📍 Sección 2

Definir Filas y Columnas

grid-template-columns: 1fr 1fr 1fr

Col 1

Col 2

Col 3

Col 4

Col 5

Col 6

grid-template-columns: 200px 1fr 1fr

Sidebar

Main

Aside

CSS

.grid {
  display: grid;

  /* 3 columnas iguales */
  grid-template-columns: 1fr 1fr 1fr;

  /* Atajo: repeat() */
  grid-template-columns: repeat(3, 1fr);

  /* Mixto: sidebar fijo + contenido flexible */
  grid-template-columns: 250px 1fr;
  grid-template-columns: 250px 1fr 200px;

  /* Filas con altura específica */
  grid-template-rows: 70px 1fr 60px;

  /* Espaciado entre celdas */
  gap: 24px;
  row-gap: 16px;
  column-gap: 24px;
}

/* La unidad "fr" = fracción del espacio disponible */
/* 1fr 2fr 1fr → 25% | 50% | 25% */

📍 Sección 3

Posicionar Items en el Grid

El item 1 ocupa 2 columnas con grid-column: 1 / 3

Item grande (col 1-2)

Normal

CSS — Posicionamiento

/* grid-column: inicio / fin (las líneas de la grilla) */
.item-ancho {
  grid-column: 1 / 3;   /* ocupa columnas 1 y 2 */
  grid-column: 1 / -1;  /* ocupa TODA la fila */
  grid-column: span 2;  /* ocupa 2 columnas desde donde está */
}

.item-alto {
  grid-row: 1 / 3;      /* ocupa filas 1 y 2 */
  grid-row: span 2;     /* ocupa 2 filas desde donde está */
}

/* Combinado: ocupa 2 columnas y 2 filas */
.item-grande {
  grid-column: span 2;
  grid-row: span 2;
}

📍 Sección 4

Grid Template Areas

La propiedad más poderosa de Grid: definir zonas con nombres descriptivos. Así "dibujás" el layout directamente en el CSS.

CSS — Grid Areas (Layout Completo)

.pagina {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 70px 1fr 60px;
  min-height: 100vh;

  /* Dibujamos el layout con nombres */
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
}

/* Cada elemento se asigna a su área */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Responsive: en mobile, todo apilado */
@media (max-width: 768px) {
  .pagina {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

📍 Sección 5

Grid Responsive con auto-fill y minmax

La combinación más poderosa: un grid que se adapta solo sin media queries.

repeat(auto-fill, minmax(130px, 1fr))

Card 1

Card 2

Card 3

Card 4

Card 5

CSS

/* auto-fill: crea tantas columnas como quepan */
/* minmax(250px, 1fr): mínimo 250px, máximo crece igual */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
/* Este ejemplo es AUTOMÁTICAMENTE responsive:
   - Pantalla grande: 4 columnas
   - Tablet: 2-3 columnas
   - Mobile: 1-2 columnas
   Sin necesidad de media queries! */

/* auto-fit vs auto-fill:
   auto-fill: mantiene celdas vacías
   auto-fit: colapsa celdas vacías (cards se expanden) */

✅ Sección 6

Ejercicios Resueltos

EJERCICIO 1 Layout de página completa con Grid Areas

Implementá el layout clásico de una web con header, sidebar, main content y footer usando Grid Areas.

1Definimos las áreas en el contenedor con grid-template-areas.
2Asignamos cada elemento HTML a su área con grid-area.
3En mobile cambiamos el template para apilar vertical.

HTML + CSS — Solución

/* HTML */
<div class="pagina">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main">Contenido Principal</main>
  <footer class="footer">Footer</footer>
</div>

/* CSS */
.pagina {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
  gap: 0;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
}
.header  { grid-area: header;  background: #020b18; }
.sidebar { grid-area: sidebar; background: #050f1f; }
.main    { grid-area: main;   padding: 24px; }
.footer  { grid-area: footer;  background: #020b18; }

@media (max-width: 768px) {
  .pagina {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

🚀 Sección 7

Ejercicios Propuestos

PROPUESTO 1 Galería tipo Pinterest

Creá una galería masonry (tipo Pinterest) con CSS Grid donde las imágenes ocupan diferente cantidad de filas.

Usar grid-auto-rows con valor pequeño (ej: 10px).
Cada imagen tiene un grid-row: span N diferente.
Responsive con auto-fill.

PROPUESTO 2 Dashboard de estadísticas

Diseñá un dashboard con diferentes tamaños de widgets.

Widget principal: ocupa 2 columnas y 2 filas.
3 widgets pequeños en la parte superior.
Tabla que ocupa todo el ancho inferior.
Usando grid-column/row span.