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 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.
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!
