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

CSS Grid: La gran guía para conocer los layouts 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, puedes conseguir el mismo resultado con filas y columnas.

¿Qué es lo que 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 de la rejilla 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 rejilla CSS
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.

Shopwares Einkaufswelten 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 la cuadrícula CSS
Página de inicio de Shopware reconstruida en el diseñador de Einkaufswelten ("mundos de compra" en español).

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:

Definir 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 también puedes determinar en qué dirección debe fluir tu Grid con los valores row (fila), column (columna) o dens (denso). Mientras que la fila y la columna se encargan de la alineación horizontal y vertical, respectivamente, denso determina que tu Grid se rellene económicamente. Esto significa que, con este valor, la disposición de los elementos dentro de la cuadrícula puede cambiar en determinadas circunstancias para rellenar el espacio que, de otro modo, estaría vacío. Es una función interesante, sobre todo para las galerías de fotos. 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», 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.

"*"indica que los campos son obligatorios

Me gustaría suscribirme a newsletter para estar informado sobre nuevos artículos del blog, ebooks, funciones y noticias sobre WordPress. Puedo retirar mi consentimiento en cualquier momento. Ten en cuenta nuestra Política de privacidad.
Este campo es de validación y no debe modificarse.

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 rejilla 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 rejilla 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;
}

Unir 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).

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

Lo especial de CSS Grid es la posibilidad de solapar 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 mediante 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

Rejilla CSS y consulta @media

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.

"*"indica que los campos son obligatorios

Me gustaría suscribirme a newsletter para estar informado sobre nuevos artículos del blog, ebooks, funciones y noticias sobre WordPress. Puedo retirar mi consentimiento en cualquier momento. Ten en cuenta nuestra Política de privacidad.
Este campo es de validación y no debe modificarse.

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

  • Una guía completa sobre CSS Grid por CSS Tricks
  • Una guía para aprender CSS Grid por parte de Learn CSS Grid
  • Todo lo que necesitas para aprender CSS Grid de Grid by Example
  • Pon a prueba tus habilidades: Grid Layout por parte de MDN Web Docs
  • Aprende todas las funciones de CSS Grid como si se tratase de un juego con CSS Grid Garden

¿Tienes alguna otra pregunta?

¿Qué preguntas tienes sobre CSS Grid? No dudes en utilizar la función de comentarios. ¿Quieres estar informado/a sobre nuevos artículos en torno al mundo WordPress y diseño web? Entonces síguenos en Twitter, Facebook, LinkedIn o a través de nuestra newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

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