Cómo calcular posiciones en CSS Grid

Autor: | Última modificación: 1 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

El posicionamiento de elementos en CSS es una parte muy importante del proceso de diseño de una página web. Un buen posicionamiento guía la mirada del usuario, mejora la navegación y crea retención. Sin embargo, no todo posicionamiento tiene que ser voluntario, pues el navegador también tiene la habilidad de posicionar los elementos de manera automática.

En este post, te enseñamos qué hace el navegador para calcular posiciones en CSS Grid, dado que saber cómo se calculan puede ayudarnos a escribir nuestro código de una manera más eficiente.

¿Cómo funciona CSS Grid?

CSS Grid es un sistema de posicionamiento de elementos en CSS que nos permite ubicar los elementos de nuestra página web a partir de una cuadrícula. Como toda cuadrícula, esta se crea con líneas horizontales y verticales que, a su vez, generan filas y columnas. La unidad mínima de estas filas y columnas se denomina celda.

En CSS Grid, los elementos HTML se ubican en estas celdas, que pueden expandirse para ocupar más de una fila o columna. Además, podemos utilizar distintas propiedades para determinar el número de filas y columnas que tiene esta cuadrícula, al igual que su ancho o largo.

Para conocer más sobre las distintas propiedades que tiene CSS Grid, te invitamos a revisar la sección sobre Desarrollo Web de nuestro blog, en donde encontrarás varios posts sobre el funcionamiento de este sistema. Además, te recomendamos la guía completa de CSS Grid publicada por CSS Tricks, en la que encontrarás resúmenes y diagramas sencillos sobre cada propiedad.

Entonces, podemos usar la numeración de las líneas de grid para posicionar nuestros elementos en las filas y columnas de CSS Grid. Pero ¿qué pasa cuando no lo hacemos? Como en todos los demás sistemas de posicionamiento, el navegador sabe calcular posiciones en CSS Grid de manera automática. A continuación, te explicamos qué hace exactamente el navegador para calcular posiciones en CSS Grid.

¿Cómo calcular posiciones en CSS Grid?

Lo primero que hace el navegador para calcular posiciones en CSS Grid es generar todos los elementos del grid como anónimos. Esto le permite definir cuántos elementos existen y empezar a determinar qué hacer para que todos estos elementos se ubiquen en el grid.

Entonces, el navegador revisa qué elementos tienen una posición explícita o exacta dentro de la cuadrícula diseñada. Estos son aquellos elementos que tienen definidos una posición con las propiedades grid-row y grid-column. Serán los primeros elementos que posicione el navegador.

Después de ubicar los elementos con posición exacta, el navegador revisa si existen elementos que tengan una fila explícita, pero no necesariamente una columna. Estos elementos tendrán alguna de las propiedades grid-row, grid-row-end o grid-row-start y serán los siguientes que posicione. Si no existe ningún elemento con estas características, el navegador continuará con su proceso.

El cuarto paso que hace el navegador para calcular posiciones en CSS Grid es analizar si, con la información que tiene en el momento, necesita más columnas para ubicar el resto de los elementos. Si hay un número de columnas explícitas, entonces continúa ubicando los elementos que tienen alguna posición explícita en estas columnas. Estos son los elementos que tengan las propiedades grid-column, grid-column-end o grid-column-start.

Finalmente, el navegador toma el resto de los elementos y los ubica en el orden en el que están escritos en el código. Para ello utiliza los espacios restantes que hayan quedado en la cuadrícula después de ubicar los demás elementos. Entonces, aquellos elementos que tengan otro tipo de características, como puede ser el span, se ubicarán en función del orden de lectura del navegador, que es de arriba abajo.

Los elementos que no tienen ninguna propiedad de posicionamiento definida se ubican en los huecos que dejan los demás elementos.

Y ahora, ¿cuál es el siguiente paso?

Ahora que sabes qué hace el navegador para calcular posiciones en CSS Grid, puedes utilizar esta información para escribir tus líneas de código de una manera más eficiente. Al reconocer cómo se posicionan tus elementos, te darás cuenta de que no hace falta otorgarle posiciones a todos y que algunos encontrarán el espacio que necesitan de manera automática.

Si quieres seguir aprendiendo sobre cómo escribir tu código de manera eficiente con los lenguajes de programación para web, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp. En esta formación intensiva, además de seguir aprendiendo, practicarás tus conocimientos en tus propias líneas de código, pues en el transcurso del bootcamp crearás y diseñarás tu propia página web con la ayuda de nuestros profesores. ¡No te pierdas esta oportunidad e inscríbete!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado