Grid en CSS: El secreto de los diseños modernos

¿Qué harías tú si, al intentar alinear los elementos de una página web, todo se desordenara y de repente pareciera que nada encaja en su lugar? Hace algunos años, esto le pasó a Iria, una de mis estudiantes de desarrollo web. Cuando acudió a mí, se sentía bastante frustrada porque había intentado diferentes soluciones y ninguna le funcionaba. Yo, que entendía bastante bien su frustración porque también había estado en esa posición cientos de veces, le hablé de la propiedad Grid de CSS que, por entonces, todavía era bastante desconocida. Esta fue la solución a sus males. Rápidamente, comprendió que esta propiedad le permitía organizar el contenido de su web, manteniendo una estructura clara y adaptable.

Si te ha pasado lo mismo que a Iria, entonces este artículo es para ti. Hoy voy a contarte qué es Grid en CSS, para qué sirve y cómo implementerla para que puedas organizar mejor tu página web sin tantos dolores de cabeza.

¿Qué es grid en CSS?

Antes de comenzar, debo hacer una aclaración entre dos conceptos que, pese a estar directamente relacionados, se refieren a dos cosas diferentes. En primer lugar, el término grid puede referirse a CSS Grid Layout, una técnica de diseño bidimensional que te permite organizar elementos en filas y columnas. En ese sentido, es una cuadrícula, como las líneas de un cuaderno o el tablero de ajedrez. Aquí, cada elemento tiene su espacio asignado y se ajusta perfectamente dentro de esa estructura.

Por otra parte, el término puede referirse a la propiedad grid, la cual es una forma abreviada, o shorthand, con la que puedes definir varias características de una cuadrícula en una sola declaración. Como tal, esta propiedad es parte del sistema de diseño CSS Grid Layout y puede combinar varias propiedades relacionadas con la cuadrícula, como grid-template-rows, grid-template-columns, grid-template-areas, entre otras. De esta manera, simplifica la definición de la cuadrícula en una sola línea de código.

En este artículo, me centraré específicamente en el uso de esta propiedad.

¿Para qué sirve grid en CSS?

La mayor ventaja de esta propiedad es que tiene múltiples aplicaciones que pueden facilitar tu vida como desarrollador. Veamos, por ejemplo, algunas de las más útiles:

1. Simplificar el código: En lugar de escribir líneas de código individuales para cada propiedad, puedes condensar todo en una línea. Esto no sólo te ayuda a ahorra tiempo y esfuerzos, sino que también mejora la legibilidad del código al hacerlo más conciso y organizado.
2. Facilitar el mantenimiento: Un archivo CSS bien estructurado es más fácil de leer y modificar. En ese sentido, usar la shorthand grid reduce el desorden y mejora la claridad.
3. Incrementar la eficiencia: La abreviación permite que te concentres más en el diseño visual y menos en la mecánica del código.

Sintaxis de la propiedad grid

Antes de ver la sintaxis, recordemos que la propiedad grid combina varias propiedades en una sola declaración:

• grid-template-rows: Define las filas de la cuadrícula.
• grid-template-columns: Define las columnas de la cuadrícula.
• grid-template-areas: Define las áreas dentro de la cuadrícula.
• grid-auto-rows y grid-auto-columns (opcional).
• grid-auto-flow (opcional).

Ahora sí, la sintaxis que necesitas para implementar esta shorthand es bastante simple, como verás a continuación:

grid: <grid-template-rows> / <grid-template-columns>;

En su forma más simple, puedes definir las filas y columnas en un único comando:

.container {
  display: grid;
  grid: 100px 200px / 1fr 2fr;
}

Aquí, por ejemplo, las filas tienen una altura de 100px y 200px, mientras las columnas se dividen en proporciones de 1fr y 2fr.

Ejemplos de la propiedad grid en CSS

Para que puedas entender mejor cómo funciona esta propiedad, quiero que veas un par de ejemplos a continuación:

Diseño básico

<div class="grid">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<style>
  .grid {
    display: grid;
    grid: auto 1fr / 200px 1fr;
  }

  .header {
    grid-column: 1 / span 2;
  }

  .sidebar {
    grid-row: 2 / 3;
  }
</style>

Aquí, definimos filas automáticas (auto) y proporcionales (1fr). Además, tenemos una columna fija de 200px y otra flexible.

Galería responsiva

Si lo que queremos es crear una galería de imágenes que se adapte automáticamente a los diferentes tamaños de pantalla y dispositivos, podemos hacer lo siguiente:

<div class="gallery">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
</div>

<style>
  .gallery {
    display: grid;
    grid: repeat(auto-fit, minmax(150px, 1fr)) / auto-flow;
    gap: 20px;
  }
</style>

De esta manera, nos aseguramos de que las imágenes se adapten automáticamente al tamaño de la pantalla.

Consejos para usar la propiedad grid

En el tiempo que llevo trabajando como desarrollador web, no sólo he aprendido cuáles soluciones que funcionan mejor en ciertos casos, sino que también me he dado cuenta de que hay detalles que pueden hacer una gran diferencia. Por eso, te quiero dar algunos consejos que espero te sean de utilidad al implementar esta propiedad:

1. Usa valores explícitos: Lo mejor que puedes hacer para evitar comportamientos inesperados es definir alturas y anchos claros.
2. Combínala con otras propiedades: CSS dispone de todo un arsenal de propiedades muy útiles. Por ejemplo, puedes usar gap para controlar los espacios entre las filas y columnas.
3. Apóyate en herramientas: También puedes usar generadores como CSS Grid Generator, ya que estos te ayudan a visualizar tu cuadrícula antes de implementarla.

Y con esto, podemos dar por finalizado el tema de hoy. Espero que hayas aprendido que usar la propiedad grid no solo optimiza tu código, sino que también puede cambiar drásticamente la manera en que diseñas tus proyectos web, gracias a su capacidad para resumir configuraciones complejas en una línea. Así que ten por seguro que te permitirá trabajar más rápido y con menos esfuerzo.

Puedes seguir aprendiendo sobre esta y otras herramientas útiles para la creación de páginas web en nuestro Bootcamp en Desarrollo Web. Nuestro principal objetivo es que puedas dominar las herramientas más demandadas del área y convertirte en un experto del desarrollo backend o frontend. Empieza ahora el camino hacia un futuro lleno de oportunidades, grandes salarios y estabilidad laboral.

¿Te atreves a transformar tu vida?