Introducción a CSS Grid: Parte 2
CSS Grid es un elemento que facilita el trabajo del desarrollador en front end. Anteriormente realizamos una introducción a los elementos básicos de este, hoy abordaremos cómo mover tus elementos dentro de la grilla sin la necesidad de modificar tu HTML.
Manejando los aspectos básico de CSS Grid, deberías sentirte cómodo creando una grilla. Definiendo columnas y filas con sus respectivos tamaños y espaciados. Por eso, en la segunda parte de este artículo, abordaremos cómo mover tus elementos dentro de la grilla sin modificar tu HTML.
En un artículo anterior, conocimos los primeros pasos, terminologías y soportes actuales del CSS Grid, introducción al tema que hoy desarrollaremos por completo. Permitiéndonos posicionar elementos a través de técnicas de líneas y celdas.
¿Qué son líneas de la grilla?
Existen muchas formas para posicionar elementos dentro de una grilla con la ayuda de CSS Grid. Consideraremos una grilla con 6 elementos, donde existen dos filas de 3 columnas.
Por defecto, cada uno de los elementos se ordenará de manera automática, siguiendo un orden lógico. Al tener mayor control sobre ellos, debemos hacer uso de las líneas de la grilla.
Por eso, las líneas se encuentran numeradas partiendo en 1, de izquierda a derecha y de arriba hacia abajo. (left to right, top to bottom).
El posicionamiento de la grilla
Realizaremos un ejercicio de posicionamiento de grilla, utilizando el siguiente componente:
[script: grid-positions.html]
Teniendo en cuenta que nuestra grilla se comporta de la siguiente manera:
[script: grid-container.css]
En caso de que quisiéramos posicionar nuestro elemento número 1 (.grid-box-1) en la segunda fila, y partiendo por la segunda columna, resulta sencillo.Por eso, las líneas parten en el inicio de la primera columna y también en la primera fila.
Para realizar el ejercicio de posicionamiento basta con mover el elemento número 1 (.grid-box-1) a la segunda columna y la segunda fila, tal como señalamos a continuación:
Cada elemento ocupa tramos entre filas y columnas, por lo que al moverlo pasará a ocupar el área entre la segunda y tercera columna, así como en el caso de las filas. Por lo tanto, posicionar nuestro elemento mediante CSS debería verse de la siguiente forma:
[script:grid-moving.css]
El resultado final debe ser así:
Se ve sencillo, ¿cierto? Sin embargo, podríamos acortar estas líneas de código, ya que al utilizar el shorthand de CSS Grid se obtienen los mismos resultados:
[script: grid-moving-short.css]
Hay que dar un paso más allá
Con Grid es posible realizar una infinidad de tareas si así lo queremos. Una de ellas es la capacidad de indicar la cantidad de columnas y filas que deseamos ocupar dentro de la grilla.
El posicionamiento nos permite ubicar elementos en las filas o columnas que dispongamos, al igual que el ancho (columnas) o alto (filas). En este ejemplo dispondremos de una grilla simple con el siguiente HTML:
[script: grid-template.html]
Lo ideal es obtener el siguiente resultado:
Y lo obtendremos mediante el siguiente estilado:
[script: grid-template.css]
Sin embargo, esto se ve extenso y repetitivo. Podemos aprovechar la capacidad de CSS Grid para mantener un orden lógico de los elementos dispuestos dentro de la grilla.
Es así como el grid-gap de filas y columnas puede minimizarse a una simple declaración de grid-gap el cual sigue el orden descrito, poniendo primero el valor de espaciado de filas y luego el valor de espaciado para columnas. grid-gap: $gap_filas $gap_columnas;
Minificando acciones del grid
Es posible obviar ciertas declaraciones. Por ejemplo, los órdenes de filas, siempre que la disposición de los elementos posea un orden lógico establecido:
[script: grid-template-short.css]
Podemos ver que el .header ya posee un valor de alto (row -> fila) por defecto, el cual es 1 y 2. Aquí, comienza en la primera fila y termina en la segunda. Por lo que no es necesario (para tales casos) indicar la cantidad de filas a ocupar por este elemento.
En el caso del .sidebar, este será empujado por el .header hacia la segunda fila, ya que ocupa en su totalidad, la primera fila. Así, no es necesario indicar las columnas que ocupará desde ese momento. Por defecto será desde la columna 1 a la columna 2.
Tal como ocurre con nuestro .sidebar los elementos con clase .contenido se alinearán a continuación del sidebar. Comenzando en la segunda fila y segunda columna. Cada uno de los elementos se alineará en la fila siguiente, ya que cada uno de los elementos ocupará el ancho completo restante (4 columnas, desde la fila 2 a la fila 7).
Finalmente, nuestro .sidebar ocupará el ancho completo de la última fila en donde fue alineado. Agregaremos también los posicionamientos por líneas o áreas, como explicamos a continuación:
Posicionamiento por área:
Otro método para posicionar nuestros elementos dentro de las grillas, es mediante la declaración de áreas, utilizando las propiedades grid-template-areas y grid-area. Para hacer efectivo su uso es necesario declarar las áreas de acuerdo a la cantidad de columnas y filas a utilizar.
[script:grid-areas.css]
El resultado es el esperado. Cada elemento es asignado a un área predefinida y CSS Grid se encarga del resto, distribuyendo cada elemento donde se indicó en la declaración de la grilla:
Posicionamiento con nombres por fila/columna:
Otra manera de posicionar elementos es mediante el nombramiento o declaración de líneas, filas y columnas. Realizándose mediante el uso de las propiedades grid-template-rows y grid-template-columns. Para declarar las filas y columnas, es necesario conocer la estructura fija que esta grilla tendrá.
A modo de ejemplo, utilizaremos una grilla definida de 3 columnas y 5 filas. La declaración de la grilla y sus áreas es la siguiente:
[script: grid-names.html]
[script: grid-names.css]
Mediante este tipo de declaración consideremos lo siguiente:
La división de columnas se realiza teniendo en cuenta el comienzo de nuestras columnas (col-start) y su final (col-end), los tamaños asignados definen los anchos de estas columnas (10% 1fr 1fr). Además de las líneas divisorias de nuestras columnas (col-2 col-3).
De igual manera, la división de filas se realiza teniendo en cuenta el comienzo y final de filas de la grilla (row-start y row-end), igualmente definir los altos de las filas y a su vez la creación de ellas (100px 150px 150px 150px 100px), definiendo a su vez las líneas divisor de filas (row-2 row-3 row-4 row-5).
Asignando nuestros elementos a las áreas respectivas obtendremos este resultado:
Últimas recomendaciones sobre CSS Grid
Conociendo estos aspectos básicos de CSS Grid es posible desarrollar desde grillas simples a complejas. Utilizando CSS Grid en la casi totalidad de buscadores disponibles.
Siempre es posible practicar y conocer técnicas para manejar CSS Grid desde el ambiente de aprendizaje de Firefox. Además, podemos acompañarlo con las últimas versiones de Firefox Developer Edition o Firefox Nightly, los cuales poseen un motor de CSS que permite manejar una grilla de CSS Grid de manera visual y dinámica.
Acerca del Autor
Agregar un comentario