A modo de resumen
Si conoces Flexbox, Grid te resultará familiar. Rachel Andrew mantiene un excelente sitio web dedicado a CSS Grid para ayudarte a comenzar. La cuadrícula ahora está disponible en Google Chrome.
¿Flexbox? ¿Cuadrícula?
En los últimos años, CSS Flexbox se ha vuelto muy popular y la compatibilidad con navegadores se ve muy bien (a menos que seas una de las pobres almas que tienen que admitir IE9 y versiones anteriores). Flexbox facilitó muchas tareas de diseño complejas, como el espaciado equidistante entre elementos, los diseños de arriba abajo o el santo grial de la magia de CSS: el centrado vertical.
Sin embargo, las pantallas suelen tener una segunda dimensión de la que debemos preocuparnos. A menos que te encargues de ajustar el tamaño de los elementos por tu cuenta, no puedes tener ambos un ritmo vertical y horizontal con solo usar flexbox. Aquí es donde la cuadrícula de CSS viene al rescate.
CSS Grid estuvo en desarrollo, detrás de una marca en la mayoría de los navegadores, durante más de 5 años, y se dedicó tiempo adicional a la interoperabilidad para evitar un lanzamiento con errores como el de Flexbox. Por lo tanto, si usas Grid para implementar tu diseño en Chrome, es probable que obtengas el mismo resultado en Firefox y Safari. En el momento de escribir este artículo, la implementación de Grid de Microsoft Edge está desactualizada (la misma que ya estaba presente en IE11) y la actualización está “en consideración”.
A pesar de las similitudes en el concepto y la sintaxis, no pienses en Flexbox y Grid como técnicas de diseño en competencia. La cuadrícula se organiza en dos dimensiones, mientras que Flexbox se organiza en una. Existe sinergia al usar ambos elementos en conjunto.
Cómo definir una cuadrícula
Para familiarizarte con las propiedades individuales de Grid, te recomiendo encarecidamente Grid By Example de Rachel Andrew o la Guía de referencia de CSS Tricks. Si ya conoces Flexbox, muchas de las propiedades y su significado te deberían resultar familiares.
Veamos un diseño de cuadrícula estándar de 12 columnas. El diseño clásico de 12 columnas es popular porque el número 12 es divisible por 2, 3, 4 y 6, y, por lo tanto, es útil para muchos diseños. Implementemos este diseño:
Comencemos con nuestro código de marcado:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
En nuestro hoja de estilo, comenzamos por expandir nuestro body para que cubra toda la ventana de visualización y lo convierta en un contenedor de cuadrícula:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Ahora usamos CSS Grid. ¡Hip, hip, hurra!
El siguiente paso es implementar las filas y columnas de nuestra cuadrícula. Podríamos implementar las 12 columnas en nuestra maqueta, pero como no usamos todas las columnas, si lo hicieras, el CSS se desordenaba innecesariamente. Para simplificar, implementaremos el diseño de esta manera:
El encabezado y el pie de página son variables en el ancho, y el contenido es variable en ambas dimensiones. La navegación también será variable en ambas dimensiones, pero le impondremos un ancho mínimo de 200 px. (¿Por qué? Para mostrar las funciones de la cuadrícula de CSS, por supuesto).
En CSS Grid, el conjunto de columnas y filas se denomina pistas. Comencemos por definir nuestro primer conjunto de seguimientos, las filas:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows toma una secuencia de tamaños que definen las filas individuales.
En este caso, le damos a la primera fila una altura de 150 px y a la última de 100 px.
La fila del medio se establece en auto, lo que significa que se ajustará a la altura necesaria para adaptarse a los elementos de la cuadrícula (los elementos secundarios del contenedor de cuadrícula) en esa fila. Dado que nuestro cuerpo se estira en toda la ventana de visualización, la pista que contiene el contenido (en amarillo en la imagen de arriba) al menos llenará todo el espacio disponible, pero crecerá (y hará que el documento se desplace) si es necesario.
Para las columnas, queremos adoptar un enfoque más dinámico: queremos que la navegación y el contenido crezcan (y se reduzcan), pero queremos que la navegación nunca se reduzca por debajo de 200 px y que el contenido sea más grande que la navegación. En Flexbox, usaremos flex-grow y flex-shrink, pero en Grid es un poco diferente:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Definiremos 2 columnas. La primera columna se define con la función minmax(), que toma 2 valores: el tamaño mínimo y el máximo de esa pista.
(es como min-width y max-width en uno). El ancho mínimo es, como ya
comentamos, de 200 px. El ancho máximo es 3fr. fr es una unidad específica de la cuadrícula que te permite distribuir el espacio disponible a los elementos de la cuadrícula. Es probable que fr signifique “unidad de fracción”, pero también podría significar “unidad gratuita” pronto.
Nuestros valores aquí significan que ambas columnas crecerán para llenar la pantalla, pero la columna de contenido siempre será 3 veces más ancha que la columna de navegación (siempre que la columna de navegación sea más ancha que 200 px).
Si bien la ubicación de los elementos de la cuadrícula aún no es correcta, el tamaño de las filas y las columnas se comporta correctamente y genera el comportamiento que buscábamos:
Colocación de los elementos
Una de las funciones más potentes de Grid es poder colocar elementos sin importar el orden del DOM. (Sin embargo, como los lectores de pantalla navegan por el DOM, te recomendamos que, para que sea accesible, tengas en cuenta cómo reordenas los elementos). Si no se realiza ninguna colocación manual, los elementos se colocan en la cuadrícula en orden DOM, organizados de izquierda a derecha y de arriba abajo. Cada elemento ocupa una celda. El orden en que se completa la cuadrícula se puede cambiar con grid-auto-flow.
Entonces, ¿cómo colocamos los elementos? Se podría decir que la forma más fácil de colocar elementos de cuadrícula es definir qué columnas y filas cubren. La cuadrícula ofrece dos sintaxis para hacerlo: en la primera, defines los puntos de inicio y finalización. En el segundo, defines un punto de partida y un intervalo:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Queremos que el encabezado comience en la primera columna y finalice antes de la tercera. Nuestro menú de navegación debe comenzar en la segunda fila y abarcar 2 filas en total.
Técnicamente, ya terminamos de implementar nuestro diseño, pero quiero mostrarte algunas funciones de conveniencia que Grid proporciona para facilitar la colocación. La primera función es que puedes asignar un nombre a los bordes del recorrido y usar esos nombres para la posición:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
El código anterior generará el mismo diseño que el anterior.
Aún más poderosa es la función de nombrar regiones completas en tu cuadrícula:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas toma una cadena de nombres separados por espacios, lo que le permite al desarrollador asignar un nombre a cada celda. Si dos celdas adyacentes tienen el mismo nombre, se unirán en la misma área. De esta manera, puedes proporcionar más semántica a tu código de diseño y hacer que las consultas de contenido multimedia sean más intuitivas. Una vez más, este código generará el mismo diseño que antes.
¿Hay más?
Sí, hay mucho para cubrir en una sola entrada de blog. Rachel Andrew, que también es una GDE, es una experta invitada en el grupo de trabajo de CSS y ha estado trabajando con ellos desde el principio para asegurarse de que Grid simplifique el diseño web. Incluso escribió un libro sobre el tema. Su sitio web Grid By Example es un recurso valioso para familiarizarse con Grid. Muchas personas creen que Grid es un paso revolucionario para el diseño web y ahora está habilitado de forma predeterminada en Chrome, por lo que puedes comenzar a usarlo hoy mismo.