El posicionamiento de elementos es una parte indispensable en el diseño de una página web. Un buen posicionamiento guía la mirada de los usuarios a los elementos más importantes y facilita la navegación, lo que contribuye a mejorar la experiencia de usuario. Hay muchas formas de posicionar elementos en CSS y, en esta ocasión, te enseñaremos la metodología de posicionamiento avanzado con CSS Grid.
¿Qué es el posicionamiento avanzado con CSS Grid?
Existen muchas maneras de posicionar elementos y darle orden a nuestra página web en CSS. En posts previos te hemos enseñado el método de posicionamiento clásico en CSS, basado en la propiedad position que nos permite situar elementos en relación a los márgenes. También te hemos explicado el posicionamiento avanzado con Flexbox, un sistema relativamente nuevo (creado en 2009), que se considera avanzado porque permite crear diseños más complejos de una manera más fácil y cómoda que el posicionamiento clásico.
En esta ocasión, te presentamos el posicionamiento avanzado con CSS Grid, el cual nos permite ubicar elementos en una cuadrícula completamente modificable. En esta cuadrícula, podemos nombrar nuestras posiciones, unir celdas para crear columnas y filas más grandes e incluso ver el orden de nuestros elementos desde el software de programación que estemos usando.
La mayoría de los navegadores soportan CSS Grid; aunque, en este momento, CanIUse nos muestra que Internet Explorer tiene un soporte parcial de este sistema, todos los demás lo soportan desde hace varias versiones. Por ello, puedes tener la tranquilidad de que la mayoría de tus usuarios podrán tener la experiencia que quieres usando CSS Grid.
¿Cómo funciona el posicionamiento avanzado con CSS Grid?
Así como Flexbox está basado en situar los elementos a lo largo de un eje, el cual puedes elegir con su propiedad flex-direction, CSS Grid tiene su propia forma de entender el posicionamiento de elementos. El posicionamiento avanzado con CSS Grid define la posición de un elemento en relación a una cuadrícula que nosotros mismos diseñamos. Esta cuadrícula está dividida en las siguientes unidades:
- Celda: se refiere al cuadro creado por las líneas de grid.
- Línea de grid: también conocidas como grid line. Este nombre se refiere a las líneas horizontales o verticales de la cuadrícula que se crean al definir filas y columnas.
- Pistas: también se conocen como tracks, en ingés. Este nombre se refiere a las filas o columnas que se crean en una cuadrícula.
- Área: se refiere a la agrupación de celdas en cualquier forma diferente a una fila o una columna.
Aunque tiene una nomenclatura y lógica diferente, el posicionamiento avanzado con CSS Grid funciona exactamente igual que Flexbox a nivel de HTML. En este sistema también hay un elemento que hace de contenedor en donde se ubicarán todas las celdas o lo que Flexbox entiende como flex-items. Es a este contenedor al que tendremos que aplicarle la propiedad display: grid. De este modo, el navegador entenderá que debe posicionar los elementos en relación al modelo CSS Grid y ningún otro.
Para definir la forma de la cuadrícula o grid que queremos crear, debemos definir el número de columnas que queremos y qué ancho tiene cada una. Esto lo podemos hacer insertando en la propiedad grid-template-columns cualquier unidad de medida CSS que queramos. De este modo, las columnas se crean de manera explícita mientras que las filas se crean de manera implícita, dependiendo del número de elementos a ubicar.
Una vez creada la cuadrícula, el navegador posicionará los elementos de arriba abajo y de izquierda a derecha. Es decir, empezará por la celda superior izquierda, continuará por la primera fila hasta la celda superior derecha y, después, seguirá llenando de izquierda a derecha las filas de arriba abajo hasta terminar en la celda inferior derecha.
Al igual que Flexbox y el posicionamiento clásico de CSS, el posicionamiento avanzado con CSS Grid funciona mediante la inserción de propiedades que determinan el orden de la página web. Te invitamos a leer nuestros posts sobre CSS Grid para conocer más sobre cada propiedad. También te recomendamos leer esta guía completa de CSS Grid, publicada por CSS Tricks, en la que se resumen todas las propiedades de una manera fácil de entender.
Propiedades avanzadas de CSS Grid
CSS Grid ofrece una variedad de propiedades de posicionamiento avanzado con CSS Grid que permiten un control total sobre el diseño:
- grid-template-areas: Permite definir áreas dentro de la cuadrícula y asignar nombres específicos a dichas áreas para facilitar la colocación de elementos.
- minmax(): Define tamaños mínimos y máximos para las pistas, adaptándose dinámicamente al contenido y al espacio disponible.
- auto-fill y auto-fit: Permiten la creación de pistas que se llenan automáticamente con elementos, ajustándose al tamaño del contenedor.
Herramientas y recursos adicionales
Existen diversas herramientas que pueden ayudarte a trabajar con CSS Grid de manera más eficiente:
- CSS Grid Layout Generator: Una herramienta online que permite generar layouts de CSS Grid de manera visual.
- Autoprefixer: Herramienta que agrega automáticamente los prefijos necesarios para compatibilidad con diferentes navegadores.
Ahora que conoces diferentes formas de posicionar elementos en CSS, como el posicionamiento clásico con CSS, el posicionamiento avanzado con Flexbox y, por supuesto, el posicionamiento avanzado con CSS Grid, ¡ha llegado el momento de que empieces a diseñar tu propia página web!
Para conseguirlo, no puedes perderte nuestro Desarrollo Web Full Stack Bootcamp, donde podrás convertirte en un experto en este ámbito del sector tecnológico en pocos meses. No solo continuarás aprendiendo sobre los lenguajes de programación para la web, sino que también usarás estos conocimientos para crear y diseñar tu propia página con ayuda de nuestros profesores. ¡Pide información y apúntate!
