EasyCode365EasyCode365

Introducción a CSS Grid

CSS Grid es una herramienta de layout para organizar el contenido de una página en filas y columnas.

Es útil cuando quieres crear layouts como grids de tarjetas, dashboards, sidebars, headers, footers y estructuras simples de página.

Por qué CSS Grid es útil

El flujo normal del documento apila los elementos de bloque de arriba hacia abajo.

Flexbox ayuda cuando necesitas organizar elementos en una dirección principal: una fila o una columna.

CSS Grid ayuda cuando necesitas controlar dos direcciones al mismo tiempo: filas y columnas.

Por ejemplo, una página con header, sidebar, área principal de contenido y footer es más fácil de describir con Grid que con márgenes, floats o positioning.

Qué es CSS Grid

CSS Grid es un sistema de layout bidimensional.

Eso significa que puede controlar:

  • columnas de izquierda a derecha
  • filas de arriba hacia abajo

Puedes imaginar Grid como una tabla invisible dibujada sobre una parte de tu página. Tus elementos HTML pueden colocarse dentro de las celdas de ese layout.

Grid container y grid items

Para empezar a usar CSS Grid, agrega display: grid a un elemento padre.

Ese padre se convierte en el grid container.

Sus hijos directos se convierten en grid items.

Solo lectura
<div class="grid-container">
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
</div>
Solo lectura

Solo los hijos directos se convierten en grid items. Si un elemento está más anidado, no se convierte en grid item a menos que su propio padre también use display: grid.

Si no colocas manualmente los grid items, el navegador usa auto-placement. Coloca cada grid item en la siguiente celda disponible, moviéndose de izquierda a derecha y creando una nueva fila cuando hace falta.

Crear columnas con grid-template-columns

La propiedad grid-template-columns define el número y el ancho de las columnas.

CSS Grid suele usar la unidad fr. fr viene de "fraction" y significa una fracción del espacio disponible.

Se puede editar
<div class="column-grid">
  <div>Uno</div>
  <div>Dos</div>
  <div>Tres</div>
  <div>Cuatro</div>
</div>

<style>
  .column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .column-grid div {
    padding: 20px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }
</style>

Esto crea dos columnas iguales.

Aquí hay tres patrones comunes de columnas:

  • grid-template-columns: 1fr 1fr; crea dos columnas iguales.
  • grid-template-columns: 200px 1fr; crea un sidebar fijo y un área de contenido flexible.
  • grid-template-columns: repeat(3, 1fr); crea tres columnas iguales sin escribir 1fr tres veces.

Crear filas con grid-template-rows

Las filas suelen crearse automáticamente a medida que agregas más elementos.

Cuando necesitas alturas específicas para las filas, usa grid-template-rows.

Se puede editar
<div class="row-grid">
  <div class="top-row">Fila con altura fija</div>
  <div class="content-row">Fila auto que crece con el contenido</div>
</div>

<style>
  .row-grid {
    display: grid;
    grid-template-rows: 80px auto;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .row-grid div {
    padding: 16px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .content-row {
    min-height: 120px;
  }
</style>

Esto crea dos filas:

  • la primera fila mide 80px de alto
  • la segunda fila crece según su contenido

Si no defines grid-template-rows, Grid aún crea filas automáticamente cuando los elementos necesitan más espacio.

Usar gap

La propiedad gap crea espacio entre filas y columnas del grid.

Usa gap en lugar de agregar márgenes a cada grid item.

Se puede editar
<div class="gap-grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

<style>
  .gap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-family: Arial, sans-serif;
  }

  .gap-grid div {
    padding: 20px;
    text-align: center;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

Esto agrega 20px de espacio entre grid items, pero no alrededor del borde exterior del grid.

Ejemplo de layout simple con Grid

Este ejemplo crea un pequeño layout de página con header, sidebar, área principal de contenido y footer.

El header y el footer usan grid-column para estirarse a través de ambas columnas. Esa propiedad se explica justo después del ejemplo.

Se puede editar
<div class="page-layout">
  <header class="header">Encabezado</header>
  <aside class="sidebar">Barra lateral</aside>
  <main class="main">Contenido principal</main>
  <footer class="footer">Pie de página</footer>
</div>

<style>
  .page-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
  }

  .header {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #dbeafe;
  }

  .sidebar {
    padding: 40px 20px;
    background-color: #dcfce7;
  }

  .main {
    padding: 40px 20px;
    background-color: #fef3c7;
  }

  .footer {
    grid-column: 1 / 3;
    padding: 20px;
    background-color: #e5e7eb;
  }
</style>

El sidebar y el contenido principal no tienen reglas de colocación manual. Se colocan automáticamente en las siguientes celdas disponibles del grid.

Colocar elementos a través de columnas

En el ejemplo anterior, el header y el footer se estiran a través de ambas columnas.

Esto pasa porque usan grid-column.

Solo lectura

Las columnas del grid están separadas por líneas verticales invisibles.

En un grid de dos columnas, hay tres líneas verticales:

  • la línea 1 es el borde izquierdo
  • la línea 2 está entre las dos columnas
  • la línea 3 es el borde derecho

Entonces grid-column: 1 / 3; significa: empieza en la línea 1 y termina en la línea 3.

También puedes ver -1 como línea final.

En Grid, -1 significa la última línea del grid.

Se puede editar
<div class="full-width-grid">
  <div class="wide-item">Ocupo todo el ancho del grid</div>
  <div>Uno</div>
  <div>Dos</div>
  <div>Tres</div>
</div>

<style>
  .full-width-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .full-width-grid div {
    padding: 16px;
    text-align: center;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
  }

  .wide-item {
    grid-column: 1 / -1;
  }
</style>

grid-column: 1 / -1; significa: empieza en la primera línea del grid y termina en la última línea del grid. Esto hace que el elemento ocupe todo el ancho del grid, incluso si el grid tiene más de dos columnas.

Grid vs Flexbox

Grid y Flexbox son herramientas de layout, pero son útiles en situaciones diferentes.

  • Flexbox es mejor para una dirección: una fila o una columna.
  • Grid es mejor para dos direcciones: filas y columnas juntas.

Usa Flexbox para cosas como enlaces de navegación, botones de una toolbar y grupos pequeños de elementos.

Usa Grid para layouts de página, dashboards, galerías y grids de tarjetas.

Errores comunes de principiantes

  • Poner display: grid en el elemento equivocado: agrégalo al contenedor padre, no a los elementos individuales.
  • Esperar que los elementos anidados se conviertan automáticamente en grid items: solo los hijos directos del grid container se convierten en grid items.
  • Olvidar gap: usa gap para el espacio entre grid items en lugar de agregar márgenes a cada elemento.
  • Usar Grid para alineación muy simple: si solo necesitas centrar un elemento o poner un icono junto a texto, Flexbox puede ser más simple.

Mini práctica

Escribe CSS para un grid container que:

  • cree tres columnas iguales
  • agregue un 16px de gap entre elementos

Pista: usa repeat(3, 1fr).

Quiz corto con respuestas

  1. ¿Qué propiedad CSS convierte un elemento padre en un grid container?
  2. ¿Qué propiedad CSS define el tamaño y el número de columnas?
  3. ¿Qué controla gap?

Respuestas:

  1. display: grid
  2. grid-template-columns
  3. El espacio entre filas y columnas del grid.

Respuesta de la mini práctica:

Solo lectura

Pequeño desafío

Intenta crear un layout simple de dashboard.

  1. Convierte .dashboard en un grid.
  2. Crea dos columnas: 180px 1fr.
  3. Agrega un 16px de gap.
  4. Haz que .top-bar ocupe ambas columnas.
Se puede editar
<div class="dashboard">
  <div class="top-bar">Navegación del dashboard</div>
  <div class="side-menu">Enlaces del menú</div>
  <div class="content-area">Datos principales del dashboard</div>
</div>

<style>
  .dashboard {
    /* 1. Convierte esto en un grid */

    /* 2. Crea dos columnas: 180px y 1fr */

    /* 3. Agrega un gap de 16px */

    font-family: Arial, sans-serif;
  }

  .top-bar {
    /* 4. Haz que esto ocupe ambas columnas */

    padding: 16px;
    color: white;
    background-color: #1f2937;
  }

  .side-menu {
    padding: 20px;
    background-color: #dbeafe;
  }

  .content-area {
    padding: 20px;
    background-color: #fef3c7;
  }
</style>

Una posible respuesta:

Solo lectura

Resumen

  • CSS Grid crea layouts con filas y columnas.
  • El padre con display: grid es el grid container.
  • Los hijos directos del grid container son grid items.
  • grid-template-columns define columnas.
  • grid-template-rows define filas.
  • fr divide el espacio disponible en partes flexibles.
  • gap controla el espacio entre filas y columnas.
  • Grid es útil para layouts de página, dashboards, galerías y grids de tarjetas.