Resumen
Si estás familiarizado con Flexbox, Grid debería resultarte familiar. Rachel Andrew mantiene un excelente sitio web dedicado a CSS Grid para ayudarte a comenzar. Grid ya está disponible en Google Chrome.
¿Flexbox? ¿Cuadrícula?
En los últimos años, el Flexbox de CSS se ha usado mucho y la compatibilidad con navegadores se ve muy bien (a menos que seas una de las pobres personas que tienen que admitir IE9 y versiones anteriores). Flexbox facilitó muchas tareas de diseño complejas, como el espaciado equidistante entre los elementos, los diseños de arriba a abajo o el santo grial del asistente de CSS: el centro vertical.
Pero, por desgracia, las pantallas suelen tener una segunda dimensión de la que debemos preocuparnos. A falta de tener que ajustar el tamaño de los elementos, lamentablemente, no puedes tener ambos ritmos verticales y horizontales con solo usar Flexbox. Aquí es donde CSS Grid viene al rescate.
CSS Grid ha estado en desarrollo, detrás de una marca en la mayoría de los navegadores durante más de 5 años, y se ha dedicado 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. Al momento de la redacción, la implementación de Grid de Microsoft Edge está desactualizada (la misma que ya estaba presente en IE11) y la actualización "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 que compiten entre sí. Grid 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 ampliamente Grid By Example de Rachel Andrew o la Hoja de referencia de los trucos de CSS. Si estás familiarizado con Flexbox, muchas de las propiedades y su significado deberían ser conocidos.
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 lenguaje de marcado:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
En nuestra hoja de estilo, comenzamos por expandir nuestra body para que cubra todo el viewport y se convierta en un contenedor de cuadrícula:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Ahora usamos la cuadrícula de CSS. ¡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, hacer esto haría que el CSS fuera innecesariamente desordenado. Para simplificar, implementaremos el diseño de esta manera:
El ancho del encabezado y el pie de página varía, y el contenido varía en ambas dimensiones. La navegación también será variable en ambas dimensiones, pero le imponeremos un ancho mínimo de 200 px. (¿Por qué? para mostrar las funciones de la cuadrícula de CSS).
En la cuadrícula de CSS, el conjunto de columnas y filas se denomina seguimientos. 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, asignamos 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 alojar los elementos de cuadrícula (los elementos secundarios del contenedor de cuadrícula) en esa fila. Dado que nuestro cuerpo se extiende a lo largo de todo el viewport, la pista que contiene el contenido (amarillo en la imagen de arriba) al menos llenará todo el espacio disponible, pero aumentará (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 aumenten (y se reduzcan), pero queremos que la navegación nunca se reduzca por debajo de los 200 px y queremos que el contenido sea más grande que la navegación. En Flexbox, usaríamos 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;
}
Estamos definiendo 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 mencionamos, 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. fr significa "unidad de fracción", pero también puede significar unidad libre pronto.
Nuestros valores aquí significan que ambas columnas crecerán hasta 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 permanezca más ancha que 200 px).
Si bien la posición de los elementos de la cuadrícula aún no es correcta, el tamaño de las filas y las columnas se comporta de forma correcta y produce el comportamiento que queríamos:
Colocación de los artículos
Una de las funciones más potentes de Grid es poder colocar elementos sin tener en cuenta el orden del DOM. (Sin embargo, debido a que los lectores de pantalla navegan por el DOM, te recomendamos que tengas en cuenta cómo reordenar los elementos para poder acceder a ellos correctamente). 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. Puedes cambiar el orden en el que se rellena la cuadrícula con grid-auto-flow.
Entonces, ¿cómo colocamos los elementos? Podría decirse que la forma más fácil de colocar los elementos de la cuadrícula es definir qué columnas y filas cubren. Grid ofrece dos sintaxis para hacer esto: en la primera, defines puntos de inicio y finalización. En la segunda, defines un punto de inicio y un intervalo:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Queremos que el encabezado comience en la primera columna y termine antes de la tercera. Nuestra 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 útiles que proporciona Grid para que te faciliten la ubicació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 código 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 permite que el desarrollador asigne un nombre a cada celda. Si dos celdas adyacentes tienen
el mismo nombre, se fusionan 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 medios sean más intuitivas. Nuevamente, este código generará el mismo diseño que antes.
¿Hay más?
Sí, hay demasiado para cubrir en una sola entrada de blog. Rachel Andrew, que también es GDE, es 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 piensan que Grid es un paso revolucionario para el diseño web y ahora está habilitada de forma predeterminada en Chrome, por lo que puedes comenzar a usarla hoy mismo.