GRID
Introducción
• El sistema grid de CSS es el nuevo estándar para estructurar elementos en 2
dimensiones en páginas web. A diferencia del sistema flexbox, grid permite
definir con precisión la distribución de los elementos en los ejes horizontal y
vertical simultáneamente. Además, soluciona muchos problemas clásicos de
estilo y estructura con mucho menos código CSS, y nos puede servir como
sustituto de frameworks responsive tipo Bootstrap, si únicamente nos hace
falta la funcionalidad de columnas.
• Utilizaremos Grid para trabajar en forma de líneas y columnas, si queremos
Conceptos básicos. 1
• Enumera las líneas.
• Track, lo que siempre hemos
llamado fila o columna, está
entre líneas.
• Grid call, celda.
• Área, sería un área de track
fila o track columna. Siempre
cuadrada o rectangular,
nunca en forma de L.
Conceptos básicos. 2
Contenedor: Existe un elemento
padre que es el contenedor que
definirá la cuadrícula o rejilla.
Ítem: Cada uno de los hijos que
contiene la cuadrícula (elemento
contenedor).
Celda (grid cell): Cada uno de los
cuadritos (unidad mínima) de la
cuadrícula.
Area (grid area): Región o conjunto
de celdas de la cuadrícula.
Banda (grid track): Banda horizontal
o vertical de celdas de la cuadrícula.
Línea (grid line): Separador
horizontal o vertical de las celdas de
la cuadrícula.
Comparativa
Una estructura clásica: cabecera, dos columnas y pie
Teniendo en mente la disposición, antes de nada diseñaremos la rejilla a la que queremos
que se ajuste. Una opción razonable es disponer de 3 filas y 4 columnas, de forma que
podamos colocar todos los elementos y tengamos una columna vacía a cada lado del
contenido central.
Elemento contenedor
Para comenzar a construir la rejilla, necesitamos un elemento contenedor, el que
tendrá definidas las filas y columnas de la misma. Dentro de él incluiremos todos los
elementos necesarios para componer nuestra página.
Para activar la cuadrícula grid hay que utilizar sobre el elemento contenedor
la propiedad display y especificar el valor grid o inline-grid. Este valor influye
en como se comportará la cuadrícula con el contenido exterior. El primero
de ellos permite que la cuadrícula aparezca encima/debajo del contenido
exterior (en bloque) y el segundo de ellos permite que la cuadrícula aparezca
a la izquierda/derecha (en línea) del contenido exterior.
Propiedad display
Activamos el uso de grid en el contenedor mediante la propiedad display: grid. Tras
haberlo activado, para definir la rejilla en sí se declara su composición mediante las
propiedades grid-template-rows, grid-template-columns y grid-template-areas, que
definen respectivamente la distribución de filas, columnas y, dentro de éstas, qué
nombre queremos darle a las áreas rectangulares definidas por estas filas y columnas.
Grid con filas y columnas
Es posible crear cuadrículas con un tamaño explícito. Para ello, sólo tenemos que usar
las propiedades CSS grid-template-columns y grid-template-rows, que sirven para
indicar las dimensiones de cada celda de la cuadrícula, diferenciando entre columnas y
filas. Las propiedades son las siguientes:
Conociendo estas dos propiedades, asumamos el siguiente código CSS:
Grid con filas y columnas
Esto significa que tendremos una cuadricula con 2 columnas (la primera con 50px de
ancho y la segunda con 300px de ancho) y con 2 filas (la primera con 200px de alto y la
segunda con 75px de alto). Ahora, dependiendo del número de ítems (elementos hijos)
que tenga el contenedor grid, tendremos una cuadrícula de 2x2 elementos (4 ítems),
2x3 elementos (6 ítems), 2x4 elementos (8 ítems) y así sucesivamente. Si el número de
ítems es impar, la última celda de la cuadrícula se quedará vacía.
Unidad de fracción. fr
En este ejemplo he utilizado píxels como unidades de las celdas de la cuadrícula, sin
embargo, también podemos utilizar otras unidades (e incluso combinarlas) como
porcentajes, la palabra clave auto (que obtiene el tamaño restante) o la unidad especial
fr (fraction), que simboliza una fracción de espacio restante en el grid. Veamos un
código de ejemplo en acción:
Este nuevo ejemplo, se crea una
cuadrícula de 2x2, donde el tamaño de
ancho de la cuadrícula se divide en dos
columnas (mismo tamaño de ancho
para cada una), y el tamaño de alto de
la cuadrícula se divide en dos filas,
donde la primera ocupará el doble (2 fr)
que la segunda (1 fr):
De esta forma, podemos tener un mejor
control del espacio restante de la
cuadrícula, y como utilizarlo.
Se pueden combinar varias unidades
diferentes, pudiendo utilizar píxeles (px) y
fracciones restantes (fr), porcentajes (%) y
fracciones restantes (fr) o combinaciónes
similares.
Filas y Columnas repetitivas
En algunos casos, en las propiedades grid-template-columns y grid-template-rows
podemos necesitar indicar las mismas cantidades un número alto de veces, resultando
repetitivo y molesto. Se puede utilizar la expresión repeat() para indicar repetición de
valores, indicando el número de veces que se repiten y el tamaño en cuestión.
La expresión a utilizar sería la siguiente: repeat([núm de veces], [valor o valores]):
Si tuviéramos un
contenedor grid con 8
ítems hijos (o más), el
ejemplo anterior crearía
una cuadrícula con 4
columnas (la primera de
100px de ancho, la
segunda y tercera de 50px
Equivaldría a: de ancho y la cuarta de
200px de ancho). Por otro
lado, tendría 2 filas (la
primera de 50px de alto, y
la segunda de 100px de
alto). En el caso de tener
más ítems hijos, el patrón
se seguiría repitiendo.
Grid por áreas
Mediante los grids CSS es posible indicar el nombre y posición concreta de cada área de una cuadrícula. Para
ello utilizaremos la propiedad grid-template-areas, donde debemos especificar el orden de las áreas en la
cuadrícula. Posteriormente, en cada ítem hijo, utilizamos la propiedad grid-area para indicar el nombre del área
del que se trata:
Aplicando este código, conseguiríamos una cuadrícula donde:
El Item 1, la cabecera (head), ocuparía toda la parte superior.
El Item 2, el menú (menu), ocuparía el área izquierda del grid, debajo de la cabecera.
El Item 3, el contenido (main), ocuparía el área derecha del grid, debajo de la cabecera.
El Item 4, el pie de cuadrícula (foot), ocuparía toda la zona inferior del grid.
Grid por áreas
En la propiedad grid-template-areas, en lugar de indicar el nombre del área a colocar, también podemos indicar
una palabra clave especial:
La palabra clave none: Indica que no se colocará ninguna celda en esta posición.
Uno o más puntos (.): Indica que se colocará una celda vacía en esta posición.
Grid con huecos
Por defecto, la cuadrícula tiene todas sus celdas pegadas a sus celdas contiguas. Aunque sería posible darle un
margin a las celdas dentro del contenedor, existe una forma más apropiada, que evita los problemas clásicos de
los modelos de caja: los huecos (gutters).
Para especificar los huecos (espacio entre celdas) podemos utilizar las propiedades grid-column-gap y/o grid-
row-gap. En ellas indicaremos el tamaño de dichos huecos:
Tomemos el ejemplo anterior como Obtendríamos un resultado como el
base. En él, le indicamos estas siguiente, indicando huecos entre
propiedades para colocar huecos entre columnas de 100px y huecos entre filas
las celdas de la cuadrícula. El código a de 10px:
añadir al ejemplo anterior sería el
siguiente:
Atajo grid con huecos
Existe una propiedad de atajo para las propiedades grid-column-gap y grid-row-gap,
permitiéndonos la posibilidad de no tener que indicarlas por separado.
La propiedad en cuestión sería grid-gap y se utilizaría de la siguiente forma:
Posición en el grid
Existen una serie de propiedades que se pueden utilizar para colocar los ítems dentro
de la cuadrícula. Con ellas podemos distribuir los elementos de una forma muy sencilla
y cómoda. Dichas propiedades son justify-items y align-items, que ya conocerás del
módulo CSS flexbox:
Estas propiedades se aplican sobre el elemento contenedor padre, pero afectan a los
ítems hijos, por lo que actuan sobre la distribución de cada uno de los hijos. En el caso de
que queramos que uno de los ítems hijos tengan una distribución diferente al resto,
aplicamos la propiedad justify-self o align-self sobre el ítem hijo en cuestión,
sobreescribiendo su distribución.
Estas propiedades funcionan exactamente igual que sus análogas justify-items o align-
items, sólo que en lugar de indicarse en el elemento padre contenedor, se hace sobre un
elemento hijo. Las propiedades sobre ítems hijos las veremos más adelante.
Posición en el grid
También podemos utilizar las propiedades justify-content o align-content para
modificar la distribución de todo el contenido en su conjunto, y no sólo de los ítems
por separado:
De esta forma, podemos controlar
prácticamente todos los aspectos de
posicionamiento de la cuadrícula
directamente desde los estilos CSS de su
contenedor padre:
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Posición en el grid
Ajuste automático de celdas
Es posible utilizar las propiedades grid-auto-columns y grid-auto-rows para darle un
tamaño automático a las celdas de la cuadrícula. Para ello, sólo hay que especificar el
tamaño deseado en cada una de las propiedades. Además, también podemos utilizar
grid-auto-flow para indicar el flujo de elementos en la cuadrícula, y especificar por
donde se irán añadiendo. Las propiedades son las siguientes:
Un ejemplo de como se
insertarían los elementos en
una cuadrícula de 2x2
utilizando grid-auto-flow por
columnas o por filas:
Atajo grid
Por último, existe una propiedad grid que sirve de atajo para la mayoría de propiedades
CSS relativas a cuadrículas. Su esquema de utilización sería el siguiente, junto a algunos
ejemplos:
Propiedades items hijos
Hasta ahora, salvo algunas excepciones como justify-self, align-self o grid-area, hemos visto
propiedades CSS que se aplican solamente al contenedor padre de una cuadrícula. A continuación,
vamos a ver ciertas propiedades que en su lugar, se aplican a cada ítem hijo de la cuadrícula, para
alterar o cambiar el comportamiento específico de dicho elemento, que no se comporta como la
mayoría.
Existen algunas propiedades más, referentes en este caso, a la posición de los hijos de la
cuadrícula donde va a comenzar o terminar una fila o columna. Las propiedades son las
siguientes:
Propiedades items hijos
Con las propiedades de la página anterior podemos indicar el siguiente código CSS sobre el primer
ítem de una cuadrícula de 4 ítems:
De esta forma, tenemos una cuadrícula de 4
elementos, en el que indicamos la posición del
ítem 1 (elemento HTML con clase .a):
comenzando en la columna 1 y acabando en el
inicio de la columna 2:
Propiedades items hijos
Con respecto a la diapositiva anterior, si variamos los valores de forma que tomen posiciones
diferentes, como por ejemplo, si indicamos que el ítem 1 debe comenzar en la columna 1, pero
acabar en la columna 3 (ocupando la hipotética primera y segunda celda):
Propiedades items hijos
En este nuevo ejemplo, comenzamos el primer ítem en la columna 2 y lo acabamos al principio de
la columna 3, por lo que la celda permanecerá en la posición de la segunda columna. Además,
añadimos la propiedad grid-row-start que hace lo mismo que hasta ahora, pero con las filas. En
este caso, le indicamos que comience en la fila 3, por lo que el ítem 1 se desplaza a una nueva fila
de la cuadrícula, dejando en la anterior el ítem 4:
Atajo: grid-column grid-row
El módulo grid de CSS proporciona las propiedades de atajo grid-column y grid-row donde se nos
permite escribir en un formato abreviado las propiedades anteriores. Su sintaxis sería la siguiente:
Ejemplos explicados. 1
¿Cómo haríamos el siguiente layout?
Como vemos en el CSS de la clase container decimos a este elemento que su modo display es
grid. Lo que quiere decir que los hijos inmediatamente descendientes serán parte de la grilla.
El siguiente punto importante es grid-gap: 1rem. Esta línea lo que hace es incluir un "gutter" o
canal de rejilla de 1rem para separar los elementos de la grilla. La unidad rem es un tamaño que
se basa en el tamaño base de la letra m. Se usa comúnmente para maquetar de una forma más
flexible, dado que con modificar el tamaño de la fuente base todo el contenido se adaptaría en
concordancia con en el tamaño base.
Con grid-template-columns lo que hacemos es definir el número de columnas y el ancho de las
mismas. En este caso se han definido 3 columnas de 200px cada una.
Con grid-template-rows más de lo mismo, sóclo que esta vez estamos definiendo el número de
filas. En nuestro ejemplo hemos definido 2 filas de 150px cada una. Además, el algoritmo que
usa grid es lo suficiente inteligente como para colocar de forma esperada elementos extra, como
es nuestro caso, ya que hemos definido 2 filas pero hemos incluido un séptimo elemento que se
coloca en una tercera fila no definida. Y su altura (al no estar especificada) sería la que ocupase
el contenido de la celda.
Ejemplos explicados
Código completo del ejercicio anterior:
[Link]
Ejemplos explicados.2
Hemos visto que los elementos se colocan solos. Pero, ¿qué pasa si queremos colocar los
elementos nosotros? Un buen caso de uso sería para el siguiente layout:
Por esta razón podemos hacer uso de
grid-column-start y grid-column-end para
colocar elementos en un línea de
columna o grid-row-start y grid-row-end
para las filas. O también podemos hacer
uso del método acortado grid-column: X /
Y; y grid-row: X / Y; siendo X e Y el número
de columna o fila inicial y el final.
Cuando definimos una grilla de 4 columnas
por debajo se generan 5 líneas como se
puede observar en el siguiente gráfico, y a
su vez como hemos definido 3 filas por
tanto se generan 4 líneas:
Ejemplos explicados.2
Veamos el código:
[Link]
Ejemplos explicados.3. (Layouts con grid-template-areas)
CSS Grid no solamente permite hacer de nuestra maquetación más flexible, sino que además es un
motor muy potente para diseñar layouts en dos dimensiones. Por ejemplo veamos uno de los
layouts más usados a lo largo de la web. El denominado holy grail:
En este ejemplo haremos un diseño mobile-first, es decir comenzaremos maquetando
para móvil e iremos avanzando por los puntos de ruptura pasando por tablet y
posteriormente a desktop.
[Link]
Ejemplos explicados.3. (Layouts con grid-template-areas)
Código ejemplo anterior:
Con los estilos que acabamos de aplicar especificamos un máximo de ancho de 1000px.
Es recomendable hacer uso del max-width dado que en monitores especialmente
grandes no queremos que el ancho de la web sea el total del mismo.
También especificamos un mínimo de altura con vh (Viewport Height). Esto hará que
aunque no tengamos mucho contenido en nuestra sección de contenido nos
aseguramos que el footer queda abajo del todo. Si lo quitásemos quedaría tal que así:
Ejemplos explicados.3. (Layouts con grid-template-areas)
Ahora vamos a incluir las columnas y las filas. En
nuestro diseño inicial vemos que en modo móvil
disponemos de 5 filas y 1 única columna. En CSS se
traduce de la siguiente forma:
Para que resulte más visual suelo colocar las rows de
manera vertical en el código y las columnas en
horizontal.
También añadiremos algunos colores, para que se
vea todo mejor. Con lo que nuestro CSS sería el
siguiente:
Ejemplos explicados.3. (Layouts con grid-template-areas)
Y si nos fijamos atentamente veremos un nueva unidad: fr. Esta unidad de medida es propia de CSS
Grid e indica que un elemento debería ocupar una fracción determinada del espacio restante.
Lo bueno de fr es que tiene en cuenta el tamaño de los elementos de la grilla por lo que si tenemos
dos columnas y la primera hemos dicho que ocupe 100px y la segunda 1fr la segunda columna
ocupará 100% - 100px
La pregunta ahora es la siguiente: ¿Cómo
reordenamos los elementos? Es aquí donde
entran en juego grid-template-areas y grid-area.
Es mucho mejor visto en un ejemplo:
A cada sección de nuestra web le asignamos un
grid-area. El nombre del grid-area puede ser el
que queramos:
Ejemplos explicados.3. (Layouts con grid-template-areas)
Y la magia la veremos en el contenedor (main) con grid-template-areas:
De forma que en el código veremos cómo quedaría
nuestro layout gráficamente. Y contamos con la ventaja de
que el orden de los elementos en HTML es completamente
independiente. ¿Os imagináis cómo haremos para
reordenar los elementos en tableta? Pues introduciremos
una media query y simplemente añadiremos el siguiente
CSS:
Dentro del media query hemos redefinido
el número de columnas y filas. Por último
reordenamos los elementos especificando
una nueva distribución con grid-template-
areas.
Ejemplos explicados.3. (Layouts con grid-template-areas)
Y la magia la veremos en el contenedor (main) con grid-template-areas:
De forma que en el código veremos cómo quedaría
nuestro layout gráficamente. Y contamos con la ventaja de
que el orden de los elementos en HTML es completamente
independiente. ¿Os imagináis cómo haremos para
reordenar los elementos en tableta? Pues introduciremos
una media query y simplemente añadiremos el siguiente
CSS:
Dentro del media query hemos redefinido
el número de columnas y filas. Por último
reordenamos los elementos especificando
una nueva distribución con grid-template-
areas.
Ejemplos explicados.3. (Layouts con grid-template-areas)
El css hasta este punto sería:
Ejemplos explicados.3. (Layouts con grid-template-areas)
Visualmente quedaría así: El media query para desktop:
El código completo:
[Link]
Nota: prueba a sustituir dentro de grid-template-areas
un área por "." (sin las comillas).
Repeat
Repeat
grid-template-areas:
"my-header my-header my-header my-header my-header my-header my-header my-header my-header my-header my-
header my-header"
"my-nav my-nav my-nav my-nav my-section my-section my-section my-section my-aside my-aside my-aside my-aside"
"my-footer my-footer my-footer my-footer my-footer my-footer my-footer my-footer my-footer my-footer my-footer
my-footer"
}
}
Repeat
No tendría absolutamente ninguna diferencia visual. En este artículo se explica en
mayor medida esta trampa. Esto no quiere decir que ya no sea necesario un sistema de
grillas de un número determinado de columnas, lo que quiere decir es que tenemos la
libertad de elegir el número de columnas y filas dependiendo del diseño.
Responsive
¿Cómo haríamos la siguiente interacción?
Responsive
Aquí tenéis el código: CSS Grid – Galería
responsiva avanzada
[Link]
Conclusión
Como hemos visto con grid-template-areas, grid-template-rows y grid-template-columns podemos
lograr maquetación en CSS de manera fácil y efectiva. Pero solamente hemos visto la punta del
iceberg, puesto que CSS Grid trae consigo un montón más de funcionalidades y mejoras.
Por ejemplo podemos tener control absoluto del alineamiento que toman todos los elementos
dentro de la grilla tanto horizontalmente con justify-items como verticalmente con align-items.
También disponemos con justify-content o align-content formas de alinear la grilla como tal en el
eje X o el Y.
Navegadores que lo soportan
La especificación de Grid CSS ya tiene buen soporte en la actualidad y puede utilizarse en
producción. Eso sí, si requieres soporte para navegadores antiguos, sé cuidadoso. Actualmente, su
soporte es el siguiente:
[Link]
BIBLIOGRAFÍA. PARA SABER MÁS
• [Link]
• [Link]
[Link]
• [Link]
• [Link]
• [Link]
de-Grid-CS-basado-en-Grid-Layout/
• [Link]
mejor-diseno-maquetacion-web/
• [Link]
grid/
• [Link]
• [Link]
• [Link]
grid/
• [Link]
[Link]
• [Link]
start-guide--cms-27238/