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, CSS Flexbox se ha utilizado mucho y la compatibilidad con navegadores se ve muy bien (a menos que seas una de las personas que necesitan compatibilidad con 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 de la magia de CSS: el centro vertical.
Pero 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, lamentablemente, no puedes tener tanto un ritmo vertical como uno horizontal con solo usar Flexbox. Aquí es donde CSS Grid entra en acción.
CSS Grid está 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 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 Edge de Microsoft de Grid 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 competitivas. La cuadrícula se organiza en dos dimensiones, mientras que Flexbox se dispone en una. Existe sinergia cuando se usan ambos juntos.
Cómo definir una cuadrícula
Para familiarizarte con las propiedades individuales de Grid, te recomiendo encarecidamente los videos Grid By Example de Rachel Andrew o la hoja de referencia de CSS Tricks. Si estás familiarizado con Flexbox, debes conocer muchas de las propiedades y su significado.
Veamos un diseño de cuadrícula estándar de 12 columnas. El diseño clásico de 12 columnas es popular, ya que 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 expandiendo nuestro body para que cubra todo el viewport y lo convirtamos 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, esto haría que el CSS se desordenara innecesariamente. En aras de la simplicidad, implementaremos el diseño de la siguiente manera:
El encabezado y el pie de página varían en ancho, y el contenido varía en ambas dimensiones. La navegación también será variable en ambas dimensiones, pero le imponemos un ancho mínimo de 200 px. (¿Por qué? para mostrar las funciones de la cuadrícula de CSS, por supuesto).
En la cuadrícula de CSS, el conjunto de columnas y filas se denominan segmentos. Comencemos con la definición de nuestro primer conjunto de pistas, 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, la primera fila tiene una altura de 150 píxeles y la última, 100 píxeles.
La fila del medio está configurada como auto, lo que significa que se ajustará a la altura necesaria para acomodar los elementos de cuadrícula (los elementos secundarios del contenedor de cuadrícula) de esa fila. Dado que el cuerpo se extiende a lo largo de todo el viewport, el segmento que contiene el contenido (en amarillo en la imagen anterior) ocupará al menos todo el espacio disponible, pero crecerá (y hará que el documento se desplace) si es necesario.
Para las columnas, debemos adoptar un enfoque más dinámico: queremos que tanto la navegación como el contenido aumenten (y se reduzcan), pero queremos que la navegación nunca se reduzca por debajo de 200 px y queremos que el contenido sea más grande que nav. 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;
}
Definimos 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 vimos, 200 px. El ancho máximo es de 3fr. fr es una unidad específica de la cuadrícula que te permite distribuir el espacio disponible en los elementos de la cuadrícula. fr probablemente significa "unidad de fracción", pero también podría significar una unidad libre pronto.
Nuestros valores 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 esta permanezca con un ancho superior a los 200 px).
Si bien la posición de los elementos de nuestra cuadrícula aún no es correcta, el tamaño de las filas y 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 tener en cuenta el orden del DOM. Sin embargo, debido a que los lectores de pantalla navegan por el DOM, te recomendamos que, para poder acceder de manera adecuada, tengas en cuenta cómo reordenas los elementos. Si no se realiza una colocación manual, los elementos se colocan en la cuadrícula en orden DOM, organizados de izquierda a derecha y de arriba a abajo. Cada elemento ocupa una celda. El orden en el que se completa la cuadrícula se puede cambiar con grid-auto-flow.
Entonces, ¿cómo colocamos 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 los puntos de inicio y finalización. En la segunda, defines un punto de partida y un intervalo:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Queremos que nuestro encabezado comience en la primera columna y termine antes de la tercera. Nuestra navegación debería comenzar en la segunda fila e abarcar 2 filas en total.
Técnicamente, hemos terminado de implementar nuestro diseño, pero quiero mostrarte algunas funciones útiles que Grid proporciona para que facilites la colocación. La primera función es que puedes asignarles un nombre a los bordes de seguimiento y usarlos para su 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 enteras 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 string 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 a 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 demasiada información para cubrirla 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 en ella. 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 para que puedas comenzar a usarlo hoy mismo.