En marzo, Mozilla lanzó Firefox 52, que añadió soporte para CSS Grid Layout. Si no estás familiarizado con CSS Grid, es un sistema de diseño bidimensional para la web que nos permite crear patrones de diseño de forma nativa en el navegador. Esto significa que podemos recrear fácilmente cuadrículas familiares utilizando sólo unas pocas líneas de CSS. También significa que podemos hacer un montón de cosas con CSS y los diseños que no era posible antes … pero más en eso en un poco.
Una nota rápida: Este post no pretende ser un manual completo para CSS Grid, y asume una familiaridad básica con CSS Grid. Si aún no lo has hecho, te recomiendo que consultes la fantástica página de CSS Grid Layout en MDN.
Los diseños en la web siempre han sido complicados. Cuando la web se introdujo por primera vez, no había ningún método para los diseños. Luego vinieron las tablas (en tablas, en tablas, en tablas). Era una forma de hacer las cosas, pero funcionaba. Cuando se introdujo el CSS a finales de los 90, los desarrolladores pudieron empezar a utilizar divs y floats para sus diseños y maquetaciones. Esto condujo finalmente a marcos y sistemas de rejilla que ayudaron a dar sentido a todos los «inconvenientes» como la eliminación de flotadores, los márgenes negativos, el diseño responsivo y más. Y así han sido las cosas desde hace años. Hay miles de sistemas de rejilla, pero todos son, más o menos, lo mismo.
Ahora que CSS Grid Layout es una realidad, quería ver lo que se necesitaría para reemplazar un marco de rejilla existente con CSS Grid. Para este experimento, elegí el popular framework Bootstrap.
Empecé creando un sitio básico utilizando la cuadrícula de Bootstrap:
Verlo en CodePen.
Así que vamos a desglosar esto y convertirlo para utilizar CSS Grid.
En Bootstrap, la clase .container envuelve todo y establece las restricciones de ancho. También añade un relleno a los bordes izquierdo y derecho y centra todo. No hay mucho que cambiar aquí. Al igual que con Bootstrap, la clase contenedor puede ser útil para usar con CSS Grid. Lo he recreado así:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}También podemos añadir puntos de ruptura responsivos añadiendo lo siguiente:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap utiliza la clase .row para envolver las columnas y proporcionar un margen negativo a la izquierda y a la derecha para anular el relleno añadido por las columnas individuales. Los trucos como los márgenes negativos ya no son necesarios con CSS Grid, pero si has leído la documentación, sabrás que CSS Grid requiere un contenedor de rejilla. La clase .row es el lugar perfecto para hacerlo. Permítame mostrarle lo que hice, y luego lo desglosaremos.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid crea el contenedor de la cuadrícula.
La propiedad grid-template-columns define las columnas para la cuadrícula. Puede utilizar espacios para definir cada columna individualmente, pero aquí utilizamos la notación de repetición para definir 12 columnas de igual tamaño. 1fr se refiere al ancho de la columna individual. MDN define la unidad fr como una nueva unidad que «representa una fracción del espacio disponible en el contenedor de la cuadrícula». Puedes leer más sobre las unidades fr en MDN. También puedes leer más sobre la propiedad grid-template-columns.
Por último, la propiedad grid-gap es una propiedad abreviada que define tanto la cantidad de espacio entre las columnas como entre las filas de columnas. Piensa en ello como nuestro canalón. Puedes leer más sobre grid-gap aquí.
Ahora, todo lo que queda son las clases de columna. Bootstrap utiliza clases de columna como .col-md-6 o .col-lg-8 para determinar el número de columnas que debe abarcar un div. También hace flotar el div y añade relleno a la izquierda y a la derecha para crear canaletas entre las columnas. Recrear estas clases es increíblemente fácil gracias a la propiedad abreviada .grid-column. Por ejemplo, si quisiéramos recrear la clase .col-md-6, podemos usar lo siguiente:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Simple, ¿verdad? Sin flotadores. Sin relleno. Simplemente funciona. La abreviatura grid-column especifica el tamaño y la ubicación de un elemento. Podemos utilizar span para indicar que este elemento en particular debe abarcar seis columnas. La propiedad grid-gap de la envoltura se encarga automáticamente de la medianera. Puedes aprender más sobre la propiedad grid-column aquí.
¿Y qué pasa cuando lo pones todo junto? Bueno, el sitio web se ve exactamente igual, pero somos capaces de eliminar por completo la dependencia de Bootstrap y utilizar CSS Grids nativo.
Consulta el sitio web actualizado en CodePen.
Este tipo de experimento es un ejercicio de aprendizaje divertido, pero también puede ser peligroso. Tomando prestada una frase del sabio filósofo Jeff Goldblum:
«Tú… estabas tan preocupado por si podías o no, que no te paraste a pensar si debías»
No queremos limitar CSS Grid metiéndolo con calzador en una sintaxis que limitará su potencial. Hemos sido capaces de recrear fácilmente la rejilla de Bootstrap, pero CSS Grid es mucho más potente que cualquier sistema de rejilla que le haya precedido. Eso es porque es una solución nativa de la web construida desde cero.
Ya no estamos encerrados en cuadrículas de 12 columnas que flotan de izquierda a derecha. ¿Quieres colocar los elementos en lugares precisos en la cuadrícula, independientemente de su orden de origen HTML? Adelante. ¿Quiere crear elementos que abarquen varias columnas y filas? No hay problema. Echa un vistazo a esta demostración que Craig Cook, de Mozilla, creó para mostrar varios patrones de diseño. Intenta recrear algunos de esos diseños utilizando Bootstrap (pista: no es posible). Sólo estamos arañando la superficie de lo que las cuadrículas CSS pueden hacer.