CSS GRID

CSS GRID


La funcionalidad que robó mi corazón, y de la que te voy a hablar hoy, son las CSS Grid. Recuerdo que cuando asistí a la SmashingConf hace unos escasos 6 meses, ésta funcionalidad todavía estaba en desarrollo y ninguna versión estable de ningún navegador la soportaba. Pero Jen dijo «creo que para el verano del 2017, prácticamente todas las versiones estables de todos los navegadores soportarán esta feature» y… bueno, parece que tenía razón.

Sin Grid no hay CSS Grid

Antes de hablar de CSS Grid, quizás deberíamos dedicar un par de minutos a hablar del diseño en parrilla de páginas web. Básicamente, una parrilla no es más que la estructura sobre la cual posicionarás los elementos de tu composición. Las parrillas consisten en un conjunto de líneas invisibles (columnas y filas, de hecho) que sirven de soporte para la maquetación. Esto que suena bastante abstracto se ve muy claro en la siguiente imagen:
Parrilla de 12 columnas de la web de la BBC
Parrilla de 12 columnas de la web de la BBC. (Fuente).
Como puedes ver, la web presenta dos filas claramente diferenciadas: un bloque de bienvenida y otro con noticias. Los dos bloques se apoyan en un diseño de 12 columnas, pero lo hacen de forma diferente. Así, el primer bloque se divide en dos mitades: en la mitad izquierda destaca una noticia en concreto y en la mitad derecha presenta cuatro noticias. Por otro lado, el segundo bloque se divide en tres columnas del mismo tamaño.
Si has usado frameworks de maquetación web como Bootstrap de Twitter o Foundation, probablemente ya estés familiarizado con esta estructura de 12 columnas. El motivo de usar exactamente 12 columnas y no 10, por ejemplo, es la versatilidad que ofrece el número 12, porque tiene muchos factores (es divisible entre 1, 2, 3, 4, 6 y 12), así que podemos maquetar casi cualquier cosa con cierta facilidad.
En esencia, todo lo que necesitas saber sobre el diseño en parrilla es lo que te acabo de contar 🙌 Pero como sé que eres una persona con mucha curiosidad, te dejo una muy buena introducción al tema de Ed Wassermann. ¡Ah! Y si eres un diseñador o maquetador web con experiencia, ya estás familiarizado con el diseño en parrillla y quieres aportar tu granito de arena y/o corregirme, te invito a que lo hagas en los comentarios; estoy seguro de que nuestros lectores te lo agradecerán 😜

¿Cómo hacíamos las parrillas hasta ahora?

Las parrillas no son algo que hayamos inventado recientemente; llevan con nosotros muchísimos años. Pero si hablamos del mundo web, creo que es seguro afirmar que el auge de la maquetación con parrillas (¡y encima responsive!) llegó con los frameworks que te comentaba antes (Bootstrap y similares). Y, por lo tanto, tiene sentido ver cómo se diseña una web con parrilla usando alguno de estos frameworks.
Por ejemplo, si intentáramos maquetar la página de la BBC que hemos visto más arriba, el código HTML en Bootstrap sería parecido a este:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="colors.css">
<style>
article { height: 10em; }
#a1 { height: 22em; }
#a2 { margin-bottom: 2em; }
#a4 { margin-bottom: 2em; }
</style>
</head>
<body class="container-fluid">
<!-- Menu... -->
<h1>Welcome to BBC.com</h1>
<div class="header row">
<div class="col-xs-6">
<article id="a1">Last Trump rival quits Republican race</article>
</div><!-- .col-xs-6 -->
<div class="col-xs-3">
<article id="a2">Real Madrid 1-0 Manchester City (agg 1-0)</article>
<article id="a3">Reinventing China's hated 'abortion police'</article>
</div><!-- .col-xs-3 -->
<div class="col-xs-3">
<article id="a4">The dying art of headhunting tattoos</article>
<article id="a5">Six reasons the election will make history - no matter who wins</article>
</div><!-- .col-xs-3 -->
</div><!-- .header -->
<h2>News</h2>
<div class="news row">
<div class="col-xs-4">
<article id="a6">Canada wildfire threatens entire city</article>
</div><!-- .col-xs-4 -->
<div class="col-xs-4">
<article id="a7">Addiction doctor made Prince 911 call</article>
</div><!-- .col-xs-4 -->
<div class="col-xs-4">
<article id="a8">Syria truce 'extended to Aleppo'</article>
</div><!-- .col-xs-4 -->
</div><!-- .news -->
</body>
</html>
view raw01-bootstrap.html hosted with ❤ by GitHub
dando como resultado esto:
Maquetando una página con Bootstrap
Resultado de la maquetación de la página de la BBC usando Bootstrap.
Como puedes ver, el código HTML que hemos escrito refleja claramente nuestra intención de montar una parrilla. De hecho, se parece mucho a lo que se hacía hace muchos años, cuando se maquetaban las webs usando tablas 😱, cosa que en teoría se pretendía evitar con el combo HTML y CSS.
Por ejemplo, si nos centramos en el primer bloque vemos que tenemos un divdividido en tres columnas. Luego llenamos cada una de las columnas, pero tenemos que tener en cuenta que el elemento de la primera columna tiene que ser más alto que los demás, así que necesitamos especificar una altura concreta para ese elemento… Bastante engorroso, la verdad.

Un vistazo a CSS Grid

La solución al problema anterior se llama CSS Grid. CSS Grid es el sistema de maquetación más potente que hay disponible. Se trata de un sistema en 2D que nos permite definir filas y columnas (a diferencia de, por ejemplo, flexbox, el cual funciona en una única dimensión).
Para entender un poco mejor cómo funciona CSS Grid, lo mejor que podemos hacer es repetir el ejemplo de la BBC que acabamos de ver:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="colors.css">
</head>
<body>
<!-- Menu... -->
<h1>Welcome to BBC.com</h1>
<div class="header">
<article id="a1">Last Trump rival quits Republican race</article>
<article id="a2">Real Madrid 1-0 Manchester City (agg 1-0)</article>
<article id="a3">The dying art of headhunting tattoos</article>
<article id="a4">Reinventing China's hated 'abortion police'</article>
<article id="a5">Six reasons the election will make history - no matter who wins</article>
</div><!-- .header -->
<h2>News</h2>
<div class="news">
<article id="a6">Canada wildfire threatens entire city</article>
<article id="a7">Addiction doctor made Prince 911 call</article>
<article id="a8">Syria truce 'extended to Aleppo'</article>
</div><!-- .news -->
</body>
</html>
view raw02-css-grid.html hosted with ❤ by GitHub
Como puedes ver, el código HTML se ha simplificado muchísimo respecto al que habíamos creado antes. Ahora, cada una de las secciones tiene una sencilla lista de noticias; no hay nada que indique cuál es la maquetación de la página. Si renderizáramos esta página «pelada», lo que veríamos es lo siguiente:
Página de la BBC sin estilos de maquetación
Página de la BBC sin estilos de maquetación.
¿Cómo conseguimos darle el estilo que queremos? ¡Pues saltando al mundo del CSS, claro! Para poder definir la parrilla con CSS Grid, deberemos aplicar estilos al elemento contenedor (el cual definirá la «parrilla» en si) y a los elementos hijo (los cuales se convertirán en los items de la parrilla):
.header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 10em 10em;
grid-gap: 1em;
width: 100%;
}
.news {
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-template-rows: 10em;
grid-gap: 1em;
}
view raw03-style.css hosted with ❤ by GitHub
lo cual genera el siguiente resultado:
Página de la BBC maquetada con CSS Grid automáticamente
Página de la BBC maquetada con CSS Grid, cuando todavía no hemos especificado que la primera noticia ocupa dos celdas.
El código CSS que acabamos de crear especifica la parrilla sobre la que se montará la página. Sin hacer nada más, el propio navegador posiciona de forma automática cada uno de los elementos hijo (las noticias de la BBC) en su correspondiente celda. ¡Increíble! Aunque, bueno, el resultado que conseguimos es casi el que queríamos. ¿Qué ha fallado?
El primer bloque lo hemos dividido en tres columnas y dos filas (lo cual ha generado 6 celdas). El problema es que la primera noticia debía ocupar dos celdas (la primera columna de la primera fila y la primera columna de la segunda fila). Como no hemos especificado este requisito en ningún lado, la maquetación por defecto que ha salido no es exactamente lo que queríamos.
Arreglémoslo añadiendo una nueva regla para que el primer elemento de la sección header ocupe dos celdas:
.header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 10em 10em;
grid-gap: 1em;
width: 100%;
}
.news {
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-template-rows: 10em;
grid-gap: 1em;
}
.header article:first-child {
grid-row-start: 1;
grid-row-end: 3;
}
view raw04-style.css hosted with ❤ by GitHub
con lo que, ahora sí, tenemos lo que queríamos:
Página de la BBC maquetada con CSS Grid
Página de la BBC perfectamente maquetada con CSS Grid.
Voilà! Ya tenemos una copia de lo que teníamos al principio, pero con una sencillez y elegancia brutales. CSS Grid nos ha permitido definir un código HTML super limpio y completamente independiente de la maquetación final. Fantástico, ¿no crees?

Recursos para aprender CSS Grid

Para empezar, te recomiendo que pruebes el juego CSS Grid Garden de Thomas H. Park. A lo largo de sus 28 niveles aprenderás todas las funcionalidades básicas (y no tan básicas) de CSS Grid de una forma divertida y amena:
CSS Grid Garden
Aprende CSS Grid con este juego interactivo.
Otros recursos (más completos y exhaustivos) para dominar el futuro de la web son:
  • Guía completa de CSS Grid en CSS Tricks. No creo que esta web necesite muchas presentaciones… Aquí encontrarás todas las propiedades de CSS Grid, explicaciones detalladas sobre cada una de ellas y ejemplos de cómo usarlas. La web divide el contenido en dos columnas: las reglas que aplican al padre (la «parrilla») y las reglas que aplican a los hijos (los items).
  • CSS Grid Layout en Mozilla. Aunque un poco menos completo que el recurso anterior, su sencillez te permite encontrar rápidamente el nombre de la propiedad que te interesa.
  • Ejemplos de Grid. Una variada colección de ejemplos de parrillas. Si no sabes por dónde empezar, tener estos ejemplos puede ser muy útil 😋

Conclusión

¡Por fin podemos separar la maquetación del contenido! Sin ninguna duda, CSS Grid va a revolucionar la forma en la que montas las páginas web. La potencia de esta herramienta es brutal y supera con creces todo lo que hemos estado haciendo hasta ahora. Te recomiendo que te familiarices cuanto antes con CSS Grid y que empieces a aplicarlo a tus proyectos.
El futuro de la web es hoy.
Imagen destacada de Dmitri Popov.
SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

0 comentarios:

Publicar un comentario