Qué es display grid en CSS y cómo usarlo para crear layouts

En los inicios de la maquetación web, la creación de layouts se hacía utilizando tablas HTML. Más tarde, se empezó a utilizar los ‘float’ de CSS, gracias a los cuales se podían crear estructuras más flexibles. Pero la verdadera revolución llegó con las propiedades flex y Display grid de CSS. Gracias a estas dos propiedades es posible crear estructuras o layouts complejos y completamente responsive de una manera extremadamente sencilla.

En este artículo te voy a explicar en qué consiste la propiedad Display Grid de CSS y cómo utilizarla correctamente. ¡Empezamos!

Qué es Display Grid en CSS

Si has trabajado con CSS, seguro que conoces la propiedad ‘display’. Esta propiedad sirve para decirle a un elemento cómo se debe comportar con respecto al flujo de la página. Por ejemplo, con ‘display: block’ le indicas a un elemento que debe ocupar todo el ancho disponible, y con ‘display: inline’ le indicas que solo debe ocupar el ancho necesario.

Pero además de inline o block, existen otros valores como flex o grid. Grid es un valor de la propiedad display de CSS que permite crear estructuras de dos dimensiones (filas y columnas). De esta forma, si aplicamos ‘display grid’ a un elemento padre, todos sus elementos hijos se comportarán siguiendo la estructura de filas y columnas que le hayamos indicado.

Grid vs Flex: diferencias y cuándo utilizar cada uno

Es bastante común confundir flex con grid cuando empiezas a aprender su uso, así como no tener claro cuándo utilizar cada uno de ellos. Para intentar aclarar un poco tus posibles dudas, vamos a ver en qué se diferencian.

La principal diferencia son las dimensiones que abarcan. Mientras que flex permite distribuir el contenido en una sola dimensión o eje (o fila o columna), grid permite hacerlo en base a dos dimensiones o ejes (filas y columnas). Para que lo veas más claro, mira el siguiente ejemplo:



En cuanto al uso, lo más recomendable es utilizar flex en componentes “pequeños” como por ejemplo la típica “card” o tarjeta con imagen, texto y botón, o para distribuir los elementos de un ‘navbar’, etc.

Por otro lado, Display grid se suele usar en estructuras más grandes como el propio layout de la página, una galería en formato cuadrícula, etc.

Un ejemplo concreto que te puede ayudar a saber cuándo debes utilizar grid y cuando flex es la sección de últimos post de un blog. Imagínate la página principal de un blog en la que se muestra un listado de los últimos post.

Cada uno de esos posts es una tarjeta o ‘card’ con elementos como la imagen destacada, el título y un botón de “Ver más”. Estos elementos los distribuyes y organizas utilizando flex.

Finalmente, todo el conjunto de esas tarjetas lo distribuyes en la página en filas y columnas utilizando Display grid.

Cómo utilizar Grid de CSS

Aclarado qué es Grid en CSS, en qué se diferencia de Flex y cuándo es recomendable (que no obligatorio) utilizar cada uno, vamos a lo interesante de verdad que es saber cómo utilizar grid en CSS.

El contenedor Grid

Como te contaba más arriba, para utilizar Grid tienes que aplicar la propiedad ‘display: grid’ a un elemento padre. Haciendo esto, los hijos de este elemento contenedor se distribuirán en filas y columnas según lo configures después. Te pongo un ejemplo muy básico:

<div class=”contenedor”>



<div class=”item”>Elemento 1</div>



<div class=”item”>Elemento 2</div>



<div class=”item”>Elemento 3</div>



<div class=”item”>Elemento 4</div>



<div class=”item”>Elemento 5</div>



<div class=”item”>Elemento 6</div>



<div class=”item”>Elemento 7</div>



<div class=”item”>Elemento 8</div>



</div>



 



<style>



.contenedor{



display: grid;



}



</style>

Con el código anterior estarías utilizando Grid en el elemento “contenedor”, por lo que todos los elementos “item” formarán parte de una estructura de filas y columnas. Como todavía no hemos definido las filas y columnas, por defecto se visualizará en 1 fila y 1 columna.

Además de “display: grid” también existe “display: inline-grid”. La diferencia es que mientras que “grid” se comporta como un elemento de bloque (como un “display: block”), “inline-grid” lo hace como un elemento en línea (como un “display: inline”).

Definir las filas y columnas

Después de establecer el contenedor como un elemento Grid, lo siguiente que puedes hacer es establecer el número de filas y columnas en las que quieres que se distribuya el contenido. Para ello tienes que utilizar las siguientes propiedades:

• ‘grid-template-columns’ para establecer el número de columnas


• ‘grid-template-rows’ para establecer el número de filas

En ambos casos, la manera de establecer el número de columnas (o filas) y su tamaño, es indicar el tamaño que debería tener cada columna (o fila). Suena raro, pero lo verás mejor en este ejemplo:

Voy a construir un Grid de 4 columnas y 2 filas con el siguiente código:

<div class="contenedor">



<div class="item1">Elemento 1</div>



<div class="item2">Elemento 2</div>



<div class="item3">Elemento 3</div>



<div class="item4">Elemento 4</div>



<div class="item5">Elemento 5</div>



<div class="item6">Elemento 6</div>



<div class="item7">Elemento 7</div>



<div class="item8">Elemento 8</div>



</div>



 



<style>



.contenedor{



display: grid;



grid-template-columns: 100px 100px 100px 100px;



grid-template-rows: 200px 200px;



}



 



.item1{background-color: #113deb;}



.item2{background-color: #5372ef;}



.item3{background-color: #8fa2f0;}



.item4{background-color: #bac3e8;}



.item5{background-color: #a9d6f6;}



.item6{background-color: #74c0f6;}



.item7{background-color: #49acf2;}



.item8{background-color: #0b8fed;}



</style>

Para indicar que quiero 4 columnas, establezco un tamaño para cada una de ellas (en este caso de 100px) y hago lo mismo con las filas.

Seguro que ahora mismo te estás preguntando: ¿y si quiero, por ejemplo, 16 columnas? ¿Tengo que escribir 16 valores? Por suerte no es necesario. En lugar de escribir cada valor, puedes utilizar la función “repeat()” de CSS para simplificar el código:

.contenedor{



display: grid;



grid-template-columns: repeat(16, 100px);



}

La función "repeat()" de CSS acepta dos valores: el número de repeticiones y el valor para cada una de ellas.

Puedes indicar el tamaño de las filas y columnas en píxeles, porcentaje u otras unidades de medida.

¿Y si no se qué tamaño concreto va a tener cada ítem, o no quiero establecer un valor fijo? En las estructuras Display Grid puedes utilizar una unidad de medida “especial” llamada “fr” (fracción). Esta unidad de medida se corresponde con una fracción proporcional del espacio disponible. Veamos un ejemplo:

Quiero construir un Grid de 5 columnas y 3 filas, pero sin indicar un tamaño concreto para cada una de ellas.

.contenedor{



display: grid;



grid-template-columns: repeat(5, 1fr); // Equivalente a “1fr 1fr 1fr 1fr 1fr”



grid-template-rows: repeat(3, 1fr); // Equivalente a “1fr 1fr 1fr”



}

En este, cada fila y cada columna ocuparán una parte (1fr) del espacio disponible, de manera equivalente.

También puedes hacer cosas como:

.contenedor{



display: grid;



grid-template-columns: 3fr 1fr;



}

En el ejemplo anterior, nuestro Grid tendrá 2 columnas, y la primera ocupará el triple que la segunda.

Hasta ahora, en todos los ejemplos de cómo definir filas y columnas en un Grid de CSS he utilizado las propiedades “grid-template-rows” y “grid-template-columns”. Pero también es posible combinarlas utilizando un “shorthand” de CSS con la propiedad “grid-template”.

.contenedor{



display: grid;



grid-template: repeat(4, 1fr) / repeat(2, 1fr);



}

El código anterior sería equivalente a:

.contenedor{



display: grid;



grid-template-rows: repeat(4, 1fr);



grid-template-columns: repeat(2, 1fr);



}

Antes te he hablado de la función de CSS ‘repeat()’ y cómo usarla a la hora de establecer el número de filas o columnas. Pero esta no es la única función de CSS interesante que puedes aplicar a tu grid.

En CSS existe una función “minmax()” que sirve para indicar un tamaño mínimo y un tamaño máximo. Esto puede ser útil, entre otras cosas, a la hora de dar un tamaño a los ítems de nuestro grid. Por ejemplo:

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



</div>



 



<style>



.contenedor {



background-color: #cfbef2;



height: 150px;



display: grid;



grid-template-columns: repeat(2, minmax(200px, 1fr));



}



 



.elemento-1 { background: #1E3A8A;}



.elemento-2 { background: #3B82F6;}



.elemento-3 { background: #06B6D4;}



.elemento-4 { background: #162022;}



</style>

Con el código de arriba estarías creando 2 columnas que como máximo van a ocupar 1fr, pero como mínimo siempre van a medir 200px de ancho.

Hasta ahora hemos visto ejemplos de cómo establecer el número de columnas o filas, pero puede darse el caso de simplemente querer que el contenido se organice por columnas y/o filas sin tener que determinar un número concreto de ellas. Para estos casos existen dos propiedades que se pueden utilizar en la función "repeat()" de CSS que son:

• auto-fill


• auto-fit

Con auto-fill y auto-fit puedes crear tantas filas y/o columnas como entren en el contenedor, en función del tamaño de las mismas.

Por un lado, con auto-fill puedes crear tantas columnas/filas de un determinado tamaño como entren en el contenedor, manteniendo el espacio sobrante (aunque queden columnas o filas vacías).

Por otro lado, con auto-fit consigues exactamente lo mismo, pero en este caso las columnas/filas se expandirán para rellenar el espacio sobrante.

Te pongo unos ejemplos:

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



<div class="elemento-5"></div>



<div class="elemento-6"></div>



</div>



 



<style>



.contenedor {



background-color: #cfbef2;



outline: 5px solid black;



width: 850px;



height: 300px;



display: grid;



grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));



}



 



.elemento-1 { background: #1E3A8A;}



.elemento-2 { background: #3B82F6;}



.elemento-3 { background: #06B6D4;}



.elemento-4 { background: #162022;}



.elemento-5 { background: #76dc3e;}



.elemento-6 { background: #670b69;}



</style>

Como ves, con ‘auto-fill’ creamos en este caso tantas columnas de mínimo 100px como entren en el contenedor. El espacio sobrante no se rellena.

<!-- Mismo HTML del ejemplo anterior →



 



<style>



.contenedor {



background-color: #cfbef2;



outline: 5px solid black;



width: 850px;



height: 300px;



display: grid;



grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));



}



 



.elemento-1 { background: #1E3A8A;}



.elemento-2 { background: #3B82F6;}



.elemento-3 { background: #06B6D4;}



.elemento-4 { background: #162022;}



.elemento-5 { background: #76dc3e;}



.elemento-6 { background: #670b69;}



</style>

Con ‘auto-fit’ creamos tantas columnas de mínimo 100px como entren en el contenedor, que además se expandirán para ocupar todo el espacio disponible.

Las propiedades ‘auto-fill’ y ‘auto-fit’ en conjunto con la función minmax() son especialmente útiles para crear sistemas Grid responsive sin utilizar media-queries y con muy pocas líneas de código.

Definir filas y columnas por áreas

Existe otra manera de definir las filas y columnas de un Display grid de CSS y es mediante áreas. Con este método puedes definir el nombre y la posición de filas y columnas de una manera un poco más “visual”. Te pongo un ejemplo:

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



<div class="elemento-5"></div>



<div class="elemento-6"></div>



<div class="elemento-7"></div>



</div>



 



<style>



.contenedor {



display: grid;



grid-template-areas:



"cabecera cabecera cabecera"



"contenido contenido sidebar"



"logo1 logo2 logo3"



"footer footer footer";



}



 



div:not(.contenedor){width: 100%; height: 100px;}



.elemento-1 { grid-area: cabecera; background: #1E3A8A; }



.elemento-2 { grid-area: contenido; background: #3B82F6; }



.elemento-3 { grid-area: sidebar; background: #06B6D4; }



.elemento-4 { grid-area: logo1; background: #10B981; }



.elemento-5 { grid-area: logo2; background: #FBBF24; }



.elemento-6 { grid-area: logo3; background: #F472B6; }



.elemento-7 { grid-area: footer; background: #64748B ; }



</style>

En este ejemplo he construido un grid de 4 columnas y 3 filas, pero en este caso lo he hecho de un modo más visual con ‘grid-template-areas’ y he nombrado cada zona con un alias. Si te fijas en el valor de ‘grid-template-areas’ he indicado cada fila, y dentro de cada fila he indicado cada columna, todo ello con nombres.

Como quiero que la cabecera y footer ocupen las 3 columnas, lo pongo 3 veces. El contenido quiero que ocupe 2/3 por lo que lo pongo 2 veces y 1 vez el sidebar. Cada logo quiero que ocupe una columna asi que indico cada uno de ellos en la misma fila.

En el HTML he creado los <div> necesarios:

• 1 para la cabecera (solo 1 porque va a ocupar todo el ancho, es decir 3/3 columnas)


• 1 para el contenido (va a ocupar 2/3 columnas)


• 1 para el sidebar (va a ocupar 1/3 columnas)


• 3 para los logos (cada uno va a ocupar 1/3 columnas)


• 1 para el footer (todo el ancho, o sea 3/3 columnas)

Finalmente, es necesario indicarle a cada <div> cuál va a ser su área (de las que hemos definido en el ‘grid-template-areas’ con los alias) con la propiedad ‘grid-area’.

Cómo crear filas y columnas irregulares

Hasta ahora, los ejemplos que te he dado son sobre cómo crear un Display grid o cuadrícula en CSS cuyas celdas o ítems son regulares. Es decir, en un grid de 3 filas y 2 columnas habrá 6 items (3x2).

Pero también es posible crear Display grids irregulares indicando a los ítems que queramos, que se deben expandir ocupando más espacio del que ocupan por defecto. Es algo similar al “Combinar celdas” típico de un Excel, pero para que lo entiendas mejor, te lo explico con un ejemplo:

Partimos de un grid “normal” de 3 filas y 2 columnas. Cada ítem ocupa 1/3 columnas y 1/2 filas.

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



<div class="elemento-5"></div>



<div class="elemento-6"></div>



</div>



 



<style>



.contenedor {



display: grid;



grid-template-columns: repeat(3, 1fr);



}



 



div:not(.contenedor){width: 100%; height: 150px;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; }



.elemento-6 { background: #F472B6; }



</style>

Pero ahora quiero que el grid, en lugar de 6 items tenga 4 y que además uno de ellos ocupe 2/3 columnas y otro 2/2 filas.

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



</div>



 



<style>



.contenedor {



display: grid;



grid-template-columns: repeat(3, 1fr);



}



 



div:not(.contenedor){width: 100%; min-height: 150px;}



.elemento-1 { background: #1E3A8A; grid-column: span 2; }



.elemento-2 { background: #3B82F6; grid-row: span 2;}



.elemento-3 { background: #FBBF24; }



.elemento-4 { background: #F472B6; }



</style>

Como ves, ahora solamente tengo 4 <div> dentro del contenedor. Al primero de ellos le aplico “grid-column: span 2;” para decirle que se expanda para ocupar 2 espacios de columna. Al segundo le aplico “grid-row: span 2;” para que ocupe 2 espacios de fila.

Siguiendo con ejemplos de cuadrículas irregulares, también es posible indicarle a un ítem en qué columna o fila del grid debe mostrarse. Te pongo un ejemplo:

En este grid hay 6 ítems repartidos en 4 columnas. En la primera fila entran 4 ítems, por lo que los 2 restantes pasan a la segunda fila.

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



<div class="elemento-5"></div>



<div class="elemento-6"></div>



</div>



 



<style>



.contenedor {



display: grid;



grid-template-columns: repeat(4, 1fr);



}



 



div:not(.contenedor){width: 100%; min-height: 150px;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; }



.elemento-6 { background: #F472B6; }



</style>

Ahora imagina que quieres que este grid tenga un aspecto un poco más simétrico. Lo ideal sería que los elementos de la segunda fila estuviesen centrados horizontalmente con respecto a la primera. Para ello podemos indicarle al primer elemento de la segunda fila (el ítem número 5), que en lugar de empezar a mostrarse en su lugar habitual, lo haga a partir de la segunda columna, con la propiedad “grid-column-start”:

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



<div class="elemento-5"></div>



<div class="elemento-6"></div>



</div>



 



<style>



.contenedor {



display: grid;



grid-template-columns: repeat(4, 1fr);



}



 



div:not(.contenedor){width: 100%; min-height: 150px;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; grid-column-start: 2 }



.elemento-6 { background: #F472B6; }



</style>

Espaciado entre elementos con gap

En todos los ejemplos anteriores, los elementos del grid estaban pegados entre sí. A veces te puede interesar que sea así, pero otras necesitas aplicar un espaciado entre todos los ítems. Esto es posible hacerlo mediante la propiedad ‘gap’.

Para enseñarte cómo añadir gap o espaciado entre los elementos de un grid voy a reciclar un ejemplo anterior:

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



<div class="elemento-5"></div>



<div class="elemento-6"></div>



</div>



<style>



.contenedor {



display: grid;



grid-template-columns: repeat(3, 1fr);



gap: 20px;



 



div:not(.contenedor){width: 100%; height: 150px;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; }



.elemento-6 { background: #F472B6; }



}



</style>

Como puedes ver, solamente he tenido que añadir la propiedad ‘gap’ al contenedor grid. Yo he indicado el valor en píxeles, pero puedes utilizar otras unidades.

Con ‘gap’ conseguimos aplicar un espaciado tanto entre columnas como entre filas, pero también es posible indicar diferentes valores para cada caso con ‘column-gap’ y ‘row-gap’. Por ejemplo:

<div class="contenedor">



<div class="elemento-1"></div>



<div class="elemento-2"></div>



<div class="elemento-3"></div>



<div class="elemento-4"></div>



<div class="elemento-5"></div>



<div class="elemento-6"></div>



</div>



 



<style>

.contenedor {



display: grid;



grid-template-columns: repeat(3, 1fr);



column-gap: 10px;



row-gap: 50px;



 



div:not(.contenedor){width: 100%; height: 150px;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; }



.elemento-6 { background: #F472B6; }



}



</style>

Alinear elementos dentro del Display Grid

Los elementos de un Grid se pueden alinear tanto vertical como horizontalmente. Para explicar esto, lo voy a dividir en dos partes:

• Alinear el contenido del grid con respecto a su contenedor padre


• Alinear los elementos del grid con respecto a sus respectivas celdas

Si te suena complicado, no te preocupes, lo entenderás mejor con unos ejemplos:

Alinear el contenido del Display grid con respecto a su contenedor padre

Puedes alinear de forma horizontal y vertical respectivamente el contenido del grid con respecto al contenedor padre con las propiedades "justify-content" y "align-content". Los valores que aceptan son:

• start: para alinearlos al principio


• end: para alinearlos al final


• center: para centrarlos


• stretch: para extender la cuadrícula y que ocupe todo el espacio disponible


• space-between: distribuye los elementos del grid repartiendo el espacio sobrante entre ellos


• space-around: distribuye los elementos del grid repartiendo el espacio sobrante entre ellos y entre los bordes del grid (el espacio de los bordes es la mitad que el espacio entre elementos)


• space-evenly: distribuye los elementos del grid repartiendo el espacio sobrante entre ellos y entre los bordes (todos los espacios son del mismo tamaño)

<div class="contenedor">



<div class="elemento-1">1</div>



<div class="elemento-2">2</div>



<div class="elemento-3">3</div>



<div class="elemento-4">4</div>



<div class="elemento-5">5</div>



<div class="elemento-6">6</div>



</div>



<style>



.contenedor {



background-color: #cfbef2;



border: 5px solid #000;



height: 300px;



display: grid;



grid-template-columns: repeat(3, 1fr);



gap: 30px;



justify-content: stretch;



align-content: space-evenly;



}



 



div:not(.contenedor){padding: 10px; font-size: 2em; color: #fff;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; }



.elemento-6 { background: #F472B6; }



}



</style>

Alinear los elementos del grid con respecto a sus respectivas celdas

Todos los elementos o items de un grid, forman parte de una “celda” del propio grid. Para alinear los elementos de un grid con respecto a sus respectivas celdas, puedes usar las propiedades justify-items (horizontal) y align-items (vertical). Los valores que aceptan son:

• start


• end


• center


• stretch

<div class="contenedor">



<div class="elemento-1">1</div>



<div class="elemento-2">2</div>



<div class="elemento-3">3</div>



<div class="elemento-4">4</div>



<div class="elemento-5">5</div>



<div class="elemento-6">6</div>



</div>



 



.contenedor {



background-color: #cfbef2;



border: 5px solid #000;



height: 300px;



display: grid;



grid-template-columns: repeat(3, 1fr);



gap: 30px;



justify-items: start;



align-items: end;



}



 



div:not(.contenedor){padding: 10px; font-size: 2em; color: #fff;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; }



.elemento-6 { background: #F472B6; }



}

Además, también puedes alinear un elemento concreto del grid con justify-self (horizontalmente) y align-self (verticalmente).

<div class="contenedor">



<div class="elemento-1">1</div>



<div class="elemento-2">2</div>



<div class="elemento-3">3</div>



<div class="elemento-4">4</div>



<div class="elemento-5">5</div>



<div class="elemento-6">6</div>



</div>



 



<style>



.contenedor {



background-color: #cfbef2;



border: 5px solid #000;



height: 300px;



display: grid;



grid-template-columns: repeat(3, 1fr);



gap: 30px;



justify-items: start;



align-items: end;



}



 



div:not(.contenedor){padding: 10px; font-size: 2em; color: #fff;}



.elemento-1 { background: #1E3A8A; }



.elemento-2 { background: #3B82F6; justify-self: end; }



.elemento-3 { background: #06B6D4; }



.elemento-4 { background: #10B981; }



.elemento-5 { background: #FBBF24; align-self: start; }



.elemento-6 { background: #F472B6; }



}



</style>

Ordenar los elementos del Grid

Los elementos de un Display grid se pueden ordenar, independientemente del orden que tengan dentro del HTML. Esto es superútil, sobre todo a la hora de adaptar el layout a diferentes tamaños de pantalla.

Para ello, puedes utilizar la propiedad ‘order’ con un valor numérico en el elemento al cual quieras modificar su orden (por defecto todos los elementos tienen valor ‘0’ en su order). Ejemplo:

<div class="contenedor">



<div class="elemento-1">1</div>



<div class="elemento-2">2</div>



<div class="elemento-3">3</div>



<div class="elemento-4">4</div>



</div>



 



<style>

.contenedor {



background-color: #cfbef2;



height: 150px;



display: grid;



grid-template-columns: repeat(4, 1fr);



gap: 30px;



}



 



div:not(.contenedor){padding: 10px; font-size: 2em; color: #fff;}



.elemento-1 { background: #1E3A8A; order: 2;}



.elemento-2 { background: #3B82F6; order: 4;}



.elemento-3 { background: #06B6D4; order: 3;}



.elemento-4 { background: #162022; order: 1;}



}



</style>

En este ejemplo puedes ver cómo, a pesar de que el orden de los elementos en el HTML es “1 - 2 - 3 - 4”, visualmente el orden es “4 - 1 - 3 - 2”.