▷ Cómo Dominar el Display Grid en CSS

Tags: CSS

Esos años en los que usábamos float left y los width % para crear las típicas secciones en las que dividimos el contenido en varios bloques con cierto número de filas y columnas terminaron desde la inclusión de la poderosísima orden de CSS llamada «Display Grid«, una orden que te recomiendo muchísimo porque es increíblemente útil y encima es extremadamente sencilla de utilizar (mucho más fácil que estos métodos más tradicionales que he mencionado).

Display Grid, como bien indica su nombre, nos permite crear nuestros Grid de una forma óptima y sencilla. Por si alguien no sabe qué es exactamente un Grid, es el típico display de varios elementos en columnas y filas. Ahora de todos modos verás varios ejemplos y ahí ya seguro que te queda clarísimo.

¿Necesitas ayuda con el desarrollo de una página o con tu estrategia de marketing digital?
¡Consulta nuestros servicios!

En este post te mostraré cómo puedes usar esta poderosa orden de CSS y aprovecharé como siempre para darte varios consejos, fragmentos de código que podrás usar en tus páginas y por supuesto ideas de diseño y optimizaciones responsive. De todo un poco vaya, pero siempre con el Display Grid como foque principal. ¡Vamos allá!

TABLA DE CONTENIDOS

Cómo Usar Display Grid: Guía Básica
Modificar el Número de Columnas: Grid Template Columns
Responsive Grids
Cajas con un Tamaño Fijo que se Adaptan Automáticamente
Los FR y su Utilización: Cajas que Ocupen más de una Columna
Usar Grid Template Columns Repeat pero que algún elemento abarque más FR

Cómo Usar Display Grid: Guía Básica

Como te comentaba, usar Display Grid no podría ser más sencillo. Es cierto que de entrada puede resultar un poco más lioso que el método tradicional (floats, width, etc) ya que a fin de cuentas no es tan fácil deshacerse de los hábitos antiguos, pero cuando lo comprendas verás el tremendo potencial que tiene esta orden de CSS y te darás cuenta de que en realidad esta forma de programar los Grid es mucho más sencilla de utilizar, de mantener y además es mucho más óptima.

El HTML

Comencemos viendo un HTML de ejemplo y abajo te comento un poco:

/* Onicode.com */
/* HTML Básico para el ejemplo */
<section class="d-grid">
   <div>Bloque 1</div>
   <div>Bloque 2</div>
   <div>Bloque 3</div>
   <div>Bloque 4</div>
   <div>Bloque 5</div>
   <div>Bloque 6</div>
</section>

Aquí hay dos cosas importantes a comentar:

Necesitas crear un elemento padre (el elemento que contiene los hijos dentro) en el que añadiremos la clase que aplique nuestro Display Grid. En este caso he decidido usar <section>, pero usa la etiqueta que quieras (otro <div> serviría por ejemplo).
Necesitas añadir varios hijos dentro, idealmente con la misma etiqueta (en este caso del ejemplo sería <div>), ya que a fin de cuentas también necesitaremos un selector para los hijos (aunque ya verás que podrás conseguir muchas cosas sin llegar a añadir código CSS para los hijos). Podrías añadir una clase en todos los hijos, pero en el ejemplo ya ves que puedes atacar directamente a <div> sin problemas siempre y cuando aclaremos luego en el CSS que queremos seleccionar los div que estén dentro de la clase «d-grid», abajo te explico mejor igual.

He decidido crear 6 elementos para el ejemplo ya que este es un número muy interesante por ser múltiple de 2 y de 3. 12 es otro gran número por ser múltiple de 2, 3 y 4.

El CSS

Ahora veamos la parte más interesante, que es el CSS:

/* Onicode.com */
/* Grid básico de 3 columnas por fila */
.d-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* 3 columnas */
   gap: 1rem;
}

Abajo te explico un mejor, pero antes voy a añadir un poco de CSS decorativo a los hijospara mejorar un poco el aspecto de la demo. Te dejo el código también por aquí.

/* Onicode.com */
/* Estilos básicos para los hijos de nuestro Grid (las cajas) */
.d-grid > div {
   background-color: #111;
   padding: 1em;
   border: 1px solid white;
   text-align: center;
}

Recuerda que usar «>» implica que solo tendremos en cuenta los hijos directos, es decir, que solo seleccionaremos los .d-grid div, no los .d-grid div div y demás (viene genial por si creas varios <div> dentro de cada <div> directamente hijo del padre.

Aclarando Algunos Conceptos

Gap: Es el espacio que habrá entre cada una de las cajas del Grid. Únicamente el espacio entre ellas, tanto verticalmente como lateralmente, pero solo el espacio entre ellas (el espacio interior, si por ejemplo una caja en concreto no tiene otra caja arriba, pues ahí no se añadirá ningún espacio). Podría explayarme un poco más ya que puedes definir más cosas con esta orden CSS, pero eso lo dejaremos para un post futuro centrado en este aspecto. Por el momento, para lo que se busca en este post, te basta con saber esto.
Grid Template Columns: Nos permite definir cuantas columnas queremos que tenga cada fila de nuestro Grid y la verdad es que podemos hacer cosas muy interesantes, te iré explicando poco a poco en este post. Si te has fijado bien en el ejemplo, habrás visto que estamos usando una unidad bastante particular, los «fr», no te preocupes que también te explicaré qué es esto más abajo.

En el caso del ejemplo de arriba (grid-template-columns: repeat(3, 1fr);) estaríamos creando un Grid de 3 Columnas, uno de los más típicos. Este sería el resultado.

Con esto ya tienes claro lo más básico, a partir de aquí es ir jugando con estas órdenes de CSS. Ahora te muestro cómo puedes hacerlo con varios ejemplos y nos adentraremos bastante más en todas las posibilidades que nos proporciona esta metodología de desarrollo.

Modificar el Número de Columnas: Grid Template Columns

En la guía básica ya has visto cómo podrías crear un Grid de 3, pero tú podrías necesitar un Grid distinto. El cambio no podría ser más sencillo, simplemente tienes que cambiar el número 3 de «grid-template-columns: repeat(3, 1fr);» por el número de columnas quieras y listo.

Te muestro algunos ejemplos de todos modos:

2 Columnas

/* Onicode.com */
/* Grid de 2 columnas por fila */
.d-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* 2 columnas */
   gap: 1rem;
}

Así quedaría ahora. Como ves, es facilísimo hacer cambios en el número de columnas y las filas se crean de forma automática.

4 Columnas

Este ejemplo en concreto me interesa mucho para que veas algo:

/* Onicode.com */
/* Grid de 4 columnas por fila */
.d-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr); /* 4 columnas */
   gap: 1rem;
}

Como ves, los bloques seguirán añadiéndose en la siguiente fila cuando completemos la fila anterior apilándose a la izquierda.

6 Columnas

Otro ejemplo más, pero vamos, que ya lo has pillado.

/* Onicode.com */
/* Grid de 6 columnas por fila */
.d-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr); /* 6 columnas */
   gap: 1rem;
}

Dependiendo de qué tamaño de pantalla tengas, puede que hayas empezado a ver que algunos de nuestros bloques del Grid de los ejemplos están empezando a no caber en pantalla y por ende estos se apilan a la derecha sin respetar el layout principal de la página.

Esto es normal ya que a fin de cuentas nosotros simplemente estamos diciéndole al navegador cuántas columnas queremos que tenga nuestro grid y él va a respetarlo a rajatabla, por lo que cuando el contenido no quepa pues este será el resultado. Esto podemos resolverlo de varias formas que ahora más abajo te iré explicando. No es algo que sea culpa de Grid como tal, es más bien culpa de qué contenido tengas dentro de los bloques; los padding, por ejemplo, podrían hacer que esto suceda.

1 Columna

También es válido configurarlo como que solo queremos una columna, algo que se aplica bastante a menudo a los dispositivos móviles por el reducido tamaño de la pantalla, aunque por supuesto todo dependerá de qué es exactamente lo que quieres crear.

/* Onicode.com */
/* Grid de 1 columna por fila */
.d-grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr); /* 1 columnas */
   gap: 1rem;
}

Puedes crear todas las columnas que quieras (que te quepa todo en pantalla sin desmontarse ya es otra cosa), como si quieres crear un Grid de 27 columnas (menuda locura sería), por decir algo.

Responsive Grids

Lo más habitual es que no queramos que nuestros Grid tengan el mismo número de columnas entre los distintos dispositivos ya que a fin de cuentas, la diferencia de ancho de pantalla entre un móvil en vertical y un PC escritorio es abismal. Nada nuevo en ese sentido, como es habitual en el diseño responsive, tendremos que usar las Media Queries.

Para dar un ejemplo, veremos un caso en el que queremos un grid de 4 en escritorio, de 3 en tablet y de 2 en móvil.

/* Onicode.com */
/* Aquí añadimos la versión de escritorio */
.d-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr); /* 4 columnas por default (desktop)*/
   gap: 1rem;
}

/* Tablet */
@media (max-width: 720px) {
   .d-grid {
      grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablet*/
   }
}

/* Móvil */
@media (max-width: 480px) {
   .d-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil*/
   }
}

Te explico, simplemente estamos añadiendo unos Break Points mediante Media Queries. En este caso pasaríamos a 3 columnas cuando el tamaño del dispositivo del usuario sea de 720px o menos de ancho (es un estándar bastante típico para Tablet, aunque por supuesto tú puedes añadir todos los Break Points que quieras y con los píxeles que quieras) y lo mismo pero a 2 columnas cuando el dispositivo sea de 480px o menos de ancho (que este sería un estándar también bastante típico para móvil).

Recuerda que en las ordenes CSS que chocan entre ellas (en este caso estamos aplicando la misma orden grid-template-columns a la misma clase .d-grid) tienen prioridad aquellas que están más abajo. Por lo que tal y como he añadido en el ejemplo, esto implicaría que:

Mientras el dispositivo tenga un ancho menor a 480px estaremos a dos columnas.
de 480px hasta 719px estaremos a 3 columnas.
De 720px en adelante pasaremos a 4 columnas

El ejemplo que te muestro arriba tiene estas normas aplicadas y si puedes ir reduciendo/aumentando el tamaño de la ventana de tu navegador podrás ver cómo las cajas se van amoldando a la cantidad de columnas establecidas en vivo. Es decir, no tienes que recargar la página en un nuevo tamaño para ver el resultado, los cambios se hacen en vivo.

Por supuesto, si tú quieres por ejemplo, que tu Grid siempre sea a 3 columnas independientemente del tamaño del dispositivo del usuario, simplemente añades la norma sin Media Queries y listo.

Cajas con un Tamaño Fijo que se Adaptan Automáticamente

Ahora te voy a enseñar un «truquito» bastante interesante ya que para que lo sepas, hay un modo para definir un tamaño fijo que tiene que tener cada caja del grid para hacer que estas vayan saltando a la siguiente fila cuando les toque en base al tamaño del contenedor en el que esté el Grid.

Además, esto va más allá porque en el caso de que esto ocurra, las cajas de una fila que esté completa se adaptarán al tamaño completo de su contenedor para que estas siempre ocupen el ancho máximo. Me explico, si el contenedor en el que esté el Grid tiene 800px de ancho y le decimos que cada caja del grid debe tener 250px de ancho, pues tendremos 3 cajas en una fila (250×3=750, ignoraremos el gap para no complicar los cálculos) y por ende la siguiente pasaría a la siguiente fila. Pero claro, no estamos llenando los 800px del contenedor, por lo que en ese caso, las cajas se adaptaran para ocupar el máximo ancho del grid y que no quede bastante feo (cada caja pasaría a medir 800px/3 de ancho, estamos ignorando el gap para los cálculos, insisto).

Si no me he explicado bien, creo que ahora con el ejemplo en vivo lo entenderás. Vamos con el CSS:

/* Onicode.com */
/* Grid automático en base a un width */

.d-grid-auto {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
}

Como ves, las cajas se adaptan automáticamente en base al ancho especificado en el minmax. Para que entiendas mejor qué es esto de «minmax», sirve para establecer un valor mínimo y un valor máximo para que junto a auto-fit haga la magia que estás viendo en el ejemplo.

Es lo que te comentaba. Las cajas tendrán como mínimo 200px de ancho y en el momento que una no quepa, esta pasará a la siguiente fila. Pero lo importante es que además las cajas de la fila anterior se adaptaran (el valor máximo es 1fr) al ancho completo de la pantalla, por lo que la fila acabará ocupando el 100% del ancho del contenedor padre. Si no tienes muy claro qué es esto de 1fr, no temas, que en la sección de abajo lo veremos.

Algo muy interesante de este técnica de Grid es que no necesitamos añadir Media Queries para que las cajas se muestren correctamente en dispositivos móviles/tablets o en cualquier tipo de dispositivo ya que a fin de cuentas estas se adaptan solas a cualquier tamaño. ¡Compruébalo viendo esta página en distintos dispositivos!

Los FR y su Utilización: Cajas que Ocupen más de una Columna

Ahora vamos abordar un poco mejor todo esto de los «fr» que hemos ido viendo a lo largo de los ejemplos para que no te quede ningún tipo de duda ya que además podemos jugar un poco con esto para lograr Grids bastante interesantes.

Fr significa, a grandes rasgos, Fractional Unit (Unidad Fraccional), lo que viene a ser cada división que creamos en el Grid. Cada caja sería 1 fr para que me entiendas mejor, por eso cuando usamos la orden «grid-template-columns: repeat(3, 1fr);», estamos creando un Grid en el que se irán repitiendo filas en las que tendremos 3 veces una Unidad Fraccional, por eso acaba siendo un Grid de 3.

Sin embargo, también podemos indicar, si así lo queremos, que un elemento sea de por ejemplo 2fr, lo cual indicaría que dicho elemento ocupará 2 Unidades Fraccionales. Si nos centramos de nuevo en el caso de haber creado un Grid de 3, al crear un elemento con 2fr estaremos creando una columna que abarca 2 Unidades Fraccionales, es decir, que dicha columna ocupará como 2 columnas a la vez.

Para muestra un ejemplo:


/* Onicode.com */
/* Grid de 2/3 + 1/3 */
.d-grid-2fr-1fr {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 1rem;
}

Como ves, no hemos usado «repeat» ya que en este caso no buscamos que todas las cajas sean del mismo tamaño. Al poner «2fr 1fr» estamos diciéndole que queremos que siga un patrón de 2 Unidades Fraccionales seguida de 1 Unidad Fraccional. Este sería el resultado en este caso.

Si hubiéramos puesto «2fr 1fr» sería al revés, primero veríamos una caja que ocupa 2 columnas y luego 1 de 1 columna.

Las posibilidades con esto son infinitas. Por lo que os muestro un caso un poco más rebuscado.

/* Onicode.com */
/* Grid de 3/6 + 1/6 + 2/6 */
.d-grid-fr-rebuscado {
   display: grid;
   grid-template-columns: 3fr 1fr 2fr;
   gap: 1rem;
}

Al no usar el «repeat», le estamos indicando la cantidad de Unidades Fraccionales que queremos que tenga cada fila. Por lo que en este caso tendríamos un total de 6 por fila, solo que el primer elemento ocupará 3 columnas, el segundo 1 y el tercero 2, quedando la cosa tal y como ves arriba.

Usar Grid Template Columns Repeat pero que algún elemento abarque más FR

Para terminar con los ejemplos (aunque igual algún día añado algún otro caso si se me ocurre o si me sugiere alguien por comentarios) vamos a ver otro caso bastante interesante y potente que es usar Grid Template Columns Repeat para crear un Grid en el que todos los elementos abarcan lo mismo pero luego poder elegir tú a mano si quieres que algún elemento en concreto tenga más Unidades Fraccionales. Viéndolo lo entenderás mejor.

/* Onicode.com */
/* Grid de 4 columnas */
.d-grid-col-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
}

/* Clase que añadimos en el bloque que queramos que abarque 2 bloques */
.grid-col-span-2 {
   grid-column: span 2;
}

Aquí también os mostraré el HTML ya que debemos añadir la clase «grid-col-span-2» donde nos interese.

/* Onicode.com */
/* Así añadiríamos la clase en el HTML */
<section class="d-grid-col-4">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div class="grid-col-span-2">6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
   <div>10</div>
   <div>11</div>
</section>

Con esto estamos diciendo que ese elemento en concreto abarque 2fr y como has podido comprobar esto aplica a las columnas. Si quieres que algún elemento abarque 3fr basta con añadirle «span 3» y en fin, que puedes crear infinitos tipos de Grid.

Y nada, eso es todo por hoy… ya ves el tremendo potencial que tiene Grid de CSS y lo útil que es esta orden. En mi opinión junto a Flex son el santo grial del CSS, otra orden de la que ya hablaré en algún otro momento. Para terminar, ya sabes, cualquier duda o sugerencia para el post, te espero en comentarios. ¡Hasta otra!