CSS Grid: Contenedor, Columnas y Filas
Aprende el sistema de maquetación bidimensional nativo de CSS: activación con display: grid, definición de columnas y filas con grid-template y separación con gap.
¿Qué es CSS Grid Layout?
CSS Grid es el motor de maquetación más potente de CSS3. A diferencia de Flexbox (que organiza elementos en una sola dimensión a la vez), Grid permite diseñar en dos dimensiones simultáneamente (filas y columnas ordenadas en una cuadrícula matemáticamente perfecta).
Para activar una rejilla CSS, declaramos en el contenedor:
.contenedor-grid {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columnas de 200px cada una */
grid-template-rows: 100px 100px; /* 2 filas de 100px de altura */
gap: 16px; /* Separación entre celdas */
}
Diagrama 17.1: Cuadrícula bidimensional: Líneas numeradas, pistas (tracks), celdas y áreas asignadas.
¿Cuándo usar Flexbox y cuándo usar CSS Grid?
| Criterio | Flexbox | CSS Grid |
|---|---|---|
| Dimensión | Unidimensional (Fila o Columna). | Bidimensional (Filas y Columnas a la vez). |
| Enfoque de Diseño | Basado en el contenido (los elementos dictan su propio tamaño). | Basado en la estructura (la rejilla dicta el tamaño y posición de los elementos). |
| Casos de Uso Ideales | Navbars, barras de búsqueda, listas de botones y componentes pequeños. | Layout general de páginas web, galerías de fotos, tableros (dashboards) y tablas complejas. |
La Propiedad gap
El espaciado entre celdas se define de manera limpia con gap (o por separado con row-gap y column-gap). Dato clave: el gap solo se aplica entre las celdas, nunca en los bordes exteriores del contenedor.
⚡ Mi Primera Cuadrícula Bidimensional con CSS Grid
Observa cómo 6 elementos HTML se organizan automáticamente en 3 columnas uniformes con separación de 15px gracias a display: grid:
<!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>¿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.
🏛️ 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.