Terminología — CSS: Diseño con Grid

• ¿Qué es una cuadrícula?
• Tipos de cuadrículas en diseño web
• ¿Por qué usar cuadrículas?
• Conceptos clave en CSS Grid
  • Contenedor de grid
  • Líneas de grid
  • Pistas de grid (Grid Tracks)
  • Celdas de grid y áreas de grid

En esta lección vamos a hablar sobre cuadrículas, un concepto fundamental en el diseño web.

Si bien muchas veces se piensa en ellas como algo que automáticamente hace que nuestras páginas se vean organizadas y elegantes, en realidad hay ciertos principios que debemos entender para aprovecharlas bien.

¿Qué es una cuadrícula?

Las cuadrículas han existido desde hace mucho tiempo. Antes de que se usaran en la web, eran herramientas esenciales para organizar contenido en libros, periódicos y revistas. Si miras cualquier periódico, verás que los textos e imágenes están acomodados en secciones rectangulares bien definidas.

Podemos dividir la página en filas y columnas del mismo tamaño. Estas divisiones crean celdas, similares a las de una tabla, donde se coloca todo el contenido. Esto se llama cuadrícula modular y es una técnica que se usa no solo en desarrollo web, sino también en arquitectura y diseño gráfico.

Tipos de cuadrículas en diseño web

Las cuadrículas pueden ser simples o complejas. En diseño web, es común usar cuadrículas de 12 o 24 columnas, ya que permiten estructurar casi cualquier diseño de forma flexible.

Si miramos la misma página del blog con una cuadrícula superpuesta, se hace evidente su estructura:

¿Por qué usar cuadrículas?

Las cuadrículas tienen varias ventajas en el diseño web:

✅ Hacen que el diseño sea predecible y organizado. Sabemos exactamente cómo se distribuirá el contenido en relación con otros elementos, y podemos dividirlo en módulos en lugar de usar valores en píxeles.

✅ Facilitan el diseño adaptable (responsive). Es mucho más fácil ajustar una cuadrícula para diferentes tamaños de pantalla sin necesidad de rediseñar completamente la página.

Hasta ahora hemos hablado del concepto de cuadrícula en general. Pero en CSS podemos lograr este tipo de organización con diferentes métodos, como float o flexbox. Sin embargo, con la llegada de CSS Grid Layout, el proceso se simplificó significativamente, permitiéndonos crear cuadrículas flexibles y potentes con menos esfuerzo.

Conceptos clave en CSS Grid

Antes de comenzar a escribir código, es importante conocer algunos términos fundamentales en CSS Grid Layout. Para explicarlos, pensemos en una cuadrícula con 4 columnas:

Contenedor de grid

Toda la cuadrícula está dentro de un área que la delimita. A este bloque se le llama contenedor de Grid. Es el elemento principal dentro del cual se organizarán los elementos internos.

.grid-container {
  display: grid; /* Activa el sistema de Grid */
}

Líneas de grid

Nuestra cuadrícula está formada por líneas verticales y horizontales que la dividen en secciones. Aunque estas líneas no sean visibles, CSS Grid permite usarlas para colocar contenido en ubicaciones específicas.

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 3 columnas con ancho fijo */
}

Pistas de grid (Grid Tracks)

Las pistas de Grid son los espacios entre las líneas. Estas pistas pueden ser:

• Columnas, si están limitadas por líneas verticales.
• Filas, si están limitadas por líneas horizontales.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
}

Celdas de grid y áreas de grid

Cuando una fila y una columna se cruzan, forman una celda de Grid. Varias de estas celdas juntas forman un área de Grid, que se puede ocupar con un solo elemento para abarcar varias filas o columnas.

.grid-item {
  grid-column: 1 / 3; /* Ocupa desde la columna 1 hasta la 3 */
  grid-row: 1 / 2; /* Ocupa la primera fila */
}

En las próximas lecciones profundizaremos en cómo construir cuadrículas en CSS Grid con más ejemplos prácticos.