CSS Grid: La gran guía para conocer layouts tipo CSS Grid

10 min.
CSS Grid Layouts - La guía completa para conocer CSS Grid

Flexbox debería resultarnos familiar a estas alturas y ya ha permitido a muchos/as desarrolladores/as alguna que otra noche tranquila. Pero, ¿qué pasaría si pudieras ampliar el layout de Flexbox no solo a lo largo sino también a lo ancho? Esto y más es posible desde la integración de CSS Grid.

Imagina que hubiera una forma de diseñar libremente tu sitio web en una cuadrícula bidimensional. Por ejemplo, creando bloques de texto que superponen parcialmente las imágenes. O incluso galerías de imágenes más complejas sin margen negativo ni posicionamiento. O, con la ayuda de CSS, que puedas diseñar rápidamente plantillas de páginas que también sean responsivas. Hay una solución a todo esto: CSS Grid.

¿Qué es el CSS Grid?

Al igual que Flexbox, CSS Grid también se integra con la ayuda de un elemento contenedor y elementos de CSS Grid. Por ejemplo, también encontramos algunas propiedades para posicionar el Flexbox: align-items, justify items, justify self y align-self. Estos ayudan a posicionar el contenido de tu «grid» o cuadrícula en consecuencia.

A grandes rasgos, CSS Grid es una Flexbox que funciona en 2 dimensiones:

¿Qué es la cuadrícula CSS?
Cómo funciona el sistema de cuadrícula o «Grid System» con Bootstrap

Mientras que con Flexbox solo podemos construir filas y sus correspondientes columnas horizontalmente, CSS Grid nos da la posibilidad de organizarlas también verticalmente:

Diseño de rejilla CSS
CSS Grid es una herramienta potente para crear layouts bidimensionales en la web.

A primera vista, CSS Grid puede parecer relativamente poco espectacular. Al fin y al cabo, se puede conseguir el mismo resultado con filas y columnas.

¿Qué hace que CSS Grid sea tan especial?

Con el nuevo «Grid System», puedes construir todas las combinaciones imaginables. La única condición es que sean rectangulares. Las formas puras en L, por ejemplo, no se pueden construir.

De este modo podrás planificar y construir un layout de la página completa basado en CSS Grid. Las cuadrículas anidadas son tan posibles como la combinación de CSS Grid y Flexbox.

Mediante una planificación inteligente, ahora también se pueden programar layouts o diseños de tal manera que se pueda prescindir de las consultas de medios en la medida de lo posible, pero por supuesto no es necesario. Más adelante analizaré las distintas posibilidades con más detalle.

CSS Grid también viene con una serie de nuevos trucos de CSS que te harán la vida más fácil en el futuro. Una de ellas es la nueva unidad CSS: la llamada «fraction (fr)». Esto funciona de forma similar a la división del tamaño de los elementos de Flexbox. 

Una fracción o «fraction» (1fr) es una parte de una fila entera. Así, si se divide tu Grid en 3×4 como en el ejemplo de abajo de CSS Tricks,es decir,1fr = ¼ o 25 %.

Aquí también surge otra característica especial: no todas las cajas tienen que estar llenas de contenido. También puedes asignar contenido vacío en el CSS Grid:

Espacio vacío en la cuadrícula CSS
Contenido vacío en CSS Grid

W3Schools muestra otros posibles diseños para los que los CSS Grids encajen adecuadamente. De esta manera podemos determinar fácilmente que ciertos elementos deben extenderse horizontal y verticalmente en un determinado número de cajas. Las cajas pueden tener diferentes anchos (columnas) y alturas (filas).

Los mejores diseños de CSS Grid
Diseños en CSS Grid

En el ejemplo de la imagen de arriba, la primera columna ocupa más ancho en términos porcentuales que las demás. Esto se debe a que la anchura no estaba predefinida en el CSS y, por tanto, se orienta y adapta automáticamente al contenido. Lo mismo ocurriría si creáramos más contenido del que predefinimos en el CSS. Entonces la cuadrícula se ampliará automáticamente y añadirá el nuevo contenido.

Mundos de compras de Shopware se basan en un sistema de tipo CSS Grid, al menos en la vista del backend. En su editor WYSIWYG, el contenido puede mostrarse en una cuadrícula que, a primera vista, es muy similar al CSS Grid. Sin embargo, en el sitio completamente recopilado no se utiliza CSS Grid, al menos por defecto.

Mejores prácticas de rejilla CSS
Página de inicio de Shopware reconstruida en el Diseñador de Mundos de Compras

Desde 2017, CSS Grid es compatible con casi todos los navegadores comunes. Solo las versiones de Internet Explorer a partir de la 10 siguen necesitando el prefijo -ms- para poder mostrar CSS Grid casi por completo. Microsoft Edge, por su parte, ya tiene una integración total. Ahora nada se interpone en el camino de usar CSS Grid en tus futuros proyectos:

Definición de la cuadrícula CSS
¿Qué navegadores soportan CSS Grid?

¿Cómo se ve el CSS Grid en la práctica?

Como ya hemos indicado, utilizamos la función básica de forma similar a la de Flexbox. Primero determinamos un contenedor al que asignamos las funciones de la cuadrícula o del «grid».

.container {
		display: grid;}

Hay muchos otros valores que se pueden asignar para construir el grid de acuerdo a tus requerimientos:

grid-template-columns, grid-template-rows y grid-template-areas (en resumen, también se pueden establecer con grid-template). Estas propiedades contienen información sobre el número y tamaño de las filas y columnas. También puedes definir las distancias entre ellas con las propiedades column-gap y row-gap (o gap en su versión abreviada).

También tienes la posibilidad, al igual que en Flexbox, de determinar el posicionamiento global dentro del grid. Para ello, existen las propiedades: justify-items, align-items (abreviado: place-items), justify-content, align-content (abreviado: place-content).

Con la propiedad grid-auto-flow podrás determinar en qué dirección debe fluir tu grid con los valores row, column o denso. Mientras que la fila y la columna se encargan de la alineación horizontal y vertical, respectivamente, «dense» determinará que tu grid sea rellenado económicamente. Esto quiere decir que, con este valor, la disposición de tus elementos dentro del grid puede cambiar en determinadas circunstancias para rellenar el espacio que de otro modo estaría vacío. Esta es una función interesante, especialmente para las galerías de imágenes. De este modo, los elementos se desplazan hacia arriba en diferentes tamaños de pantalla si es necesario y no se crean vacíos visuales.

Mientras se definen las columnas y filas del contenedor, así como las distancias entre ellas, se utilizan los elementos de la cuadrícula para determinar exactamente dónde deben situarse en la misma. 

Una cuadrícula o grid terminado podría entonces tener este aspecto CSS:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Ahora que has creado lo que se conoce por «Grid Container», contenedor de cuadrícula en español, es el momento de llenarlo con elementos del grid. Lo particular de este sistema CSS es que la disposición en el HTML puede ser secundaria, ya que se puede dar a cada elemento una coordenada de inicio y de fin. Esto tiene lugar con grid-column-start, grid-column-end, grid-row-start, grid-row-end.

Las coordenadas apuntan a las líneas de la cuadrícula y cuentan de izquierda a derecha, o de arriba a abajo. También se pueden abreviar como grid-column y grid-row. 

Usuarios/as avanzados/as también pueden utilizar grid-area para dar a estos campos todas las coordenadas a la vez o asignar un nombre a tu «Grid Item» (elemento de la cuadrícula), cuya ubicación podrás determinar tú mismo/a en el grid container. No solo podrás nombrar los elementos del grid. También es posible asignar nombres a las líneas de la cuadrícula para poder indicar a los elementos de esta sus coordenadas utilizando estos nombres. Esto te ahorrará tener que contar por el grid.

También el uso de valores negativos, o contar de izquierda a derecha, de abajo a arriba son posibles. Sin embargo, estos son más interesantes para usuarios/as avanzados/as de CSS Grid y pueden leerse en detalle aquí:

Por último, podrás determinar individualmente el posicionamiento de los contenidos dentro de los elementos de la cuadrícula. Esto se hace con las propiedades: justify-self y align-self (abreviado: place-self).

Un grid item en CSS podría tener este aspecto:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

Grid row-end y grid-column-end también pueden utilizarse con «span +n». Aquí se ahorra el tedioso recuento de líneas. «Span 2» indica al elemento que debe extenderse sobre dos campos de la cuadrícula. Encontrarás explicaciones detalladas de cada una de las propiedades en la guía sobre trucos CSS.

Ejemplos de la web

Si eres un/a tipo/a visual como yo, necesitas ver algunos ejemplos de la vida real para entender completamente el CSS Grid. Para ello, busqué en internet webs creadas con CSS Grid o que pudieran beneficiarse de su uso.

La cuadrícula CSS en la práctica
CSS Grid para la creación de un portafolio

Levon Biss utilizó CSS Grid como herramienta de implementación para crear su portafolio. Si observas con detenimiento su sitio, te darás cuenta de que el sitio fue construido con sistemas Grid anidados. En primer lugar, el sitio web se dividió en tres secciones: encabezado, contenido principal y pie de página. La altura para el encabezado y pie de página se ha predefinido, mientras que la parte principal puede crecer de forma flexible con el contenido mediante el valor «auto». Las columnas se ajustaron a todo el ancho disponible mediante 1fr.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

La zona principal de su sitio estaba de nuevo empaquetado en un sistema Grid. Fíjate en que aquí se han mezclado las unidades CSS px y fr. De este modo, el borde tiene una anchura fija de 144px cada uno, mientras que la parte central sigue siendo flexible.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Por último, también se anidó la galería una vez más. Anteriormente, no se daban valores para los huecos de la cuadrícula. Para la galería, se han fijado en 1em. Esto ahorra añadir un margen entre las imágenes de tal modo que puedes establecer los huecos una vez en el documento. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Otra particularidad del CSS Grid es la función repeat(). Se trata de una notación abreviada de los valores repetidos. 

Repeat() toma el conjunto de valores a crear como primer valor y el tamaño como segundo valor. Por escrito, esto se vería así:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
La cuadrícula CSS en la práctica
Sitio web de ejemplo sin CSS Grid

En este ejemplo no se ha utilizado ningún Grid CSS. Como en el ejemplo anterior, podríamos haber anidado la cuadrícula o haber añadido un margen al Grid Container para el espaciado exterior.

Este es el aspecto que podría tener la división del Grid: 

Diseño de rejilla CSS
Ejemplo de sitio web con CSS Grid

Un posible uso del CSS se vería así:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Diseño de rejilla CSS
Este sitio web también podría beneficiarse del CSS Grid

Aunque todo el sitio web de Larq podría haberse beneficiado del CSS Grid, solo he seleccionado una pequeña zona con fines ilustrativos. Es precisamente aquí donde queda muy clara la ventaja de un Grid bidimensional.

Este es el aspecto que podría tener la distribución de los grid items:

Elementos de la rejilla CSS
CSS Grid en una página de ejemplo

Un posible uso del CSS se vería así:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

¿Cómo pueden combinarse CSS Grid y WordPress?

Con el nuevo editor WordPress, el contenido también puede mostrarse por defecto en filas y columnas. Sin embargo, el layout me recuerda más a Bootstrap y Cía. y extraño un poco la bidimensionalidad. Probablemente eso es lo que otros pensaron también, y por eso desarrollaron el pluginGrids: Layout builder for WordPress. El plugin es gratuito y hace exactamente lo que promete: permite crear visualmente CSS Grids sin necesidad de añadir un constructor de páginas (page builders).

CSS Grid Shopify
El plugin Grids: layout builder for WordPress en uso

Lo especial de CSS Grid es la posibilidad de superponer sin usar margen negativo o posicionamiento absoluto. Esto es exactamente lo que es posible con el plugin. Con la ayuda del índice z y también a través de la disposición en la propia cuadrícula (el último elemento está arriba, el primero abajo), se pueden mostrar jerarquías.

El ejemplo anterior podría tener el siguiente aspecto como web:

Cómo usar CSS Grid
CSS Grid como ejemplo práctico

CSS Grid y @media query

CSS Grid puede utilizarse libremente con Flexbox y Media Query. Sin embargo, hay otra nueva característica que CSS Grid trae consigo: minmax()

Como su nombre indica, se trata de valores mínimos y máximos. Puedes utilizarlo en relación con las columnas. A diferencia de Media Query, aquí no se consulta el tamaño de la pantalla, sino el tamaño del elemento. Si la caja se encoge tanto que queda por debajo del tamaño mínimo, los elementos se agrandan y se mueven para que vuelva a caber.

Minmax() funciona junto con auto-fit y tiene este aspecto:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Aquí se crean columnas que tienen un tamaño mínimo de 240px, pero un tamaño máximo de 1fr. En este ejemplo, 1fr corresponde a toda la anchura de la cuadrícula. Esto permite que varios grid items estén uno al lado del otro si hay espacio, pero utilizan todo el ancho si no hay suficiente espacio.

También hay ventajas respecto a Media Query. De este modo, puedes utilizar las coordenadas para colocar y organizar los grid items de forma diferente para cada dispositivo, especialmente en dispositivos móviles, donde puede prevalecer una jerarquía diferente a la del escritorio, esto puede crear una experiencia de usuario agradable.

Todas las particularidades de un vistazo

  • FR («fraction» o fracción) como nueva unidad CSS
  • Grid Areas y Lines pueden ser etiquetados con nombres
  • Grid-column-end puede utilizarse mediante «span n»
  • Programa las mismas columnas o filas introduciendo repeat()
  • Los grid items pueden disponerse de forma arbitraria (también superpuestos) en el grid

Otras fuentes de información sobre el tema

¿Tienes alguna otra pregunta?

¿Qué preguntas tienes sobre CSS Grid? Háznoslo saber en los comentarios. ¿Te interesan el diseño y desarrollo web y otros temas sobre WordPress? Entonces sigue a RAIDBOXES en Twitter, Facebook, LinkedIn o a través de nuestra newsletter.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño y desarrollo web. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

Tu dirección de correo electrónico no se publicará. Los campos obligatorios están marcados con *.