EDgrid ahora usa CSS Grid

CSS grid es hace poco tiempo una realidad que nadie que se dedique al diseño web puede ignorar. De hecho, desde el 9 de mayo de 2017 la W3C ya la tiene como Recomendación candidata (el paso previo a ser un estándar, lo que significa que solo hay que revisar si algún detalle ha quedado suelto y ya). En EDteam venimos hablando de CSS grid desde 2015:

Y hemos realizado nuevos tutoriales que puedes ver aqui, aqui y aqui. Además de dedicarle una clase en el curso CSS Desde Cero (2015) y CSS Desde Cero (2017).

Entonces no nos ha tomado por sorpresa, sino que tan solo estabamos esperando el tan esperado soporte de los navegadores anunciado para marzo de 2017.

Sin embargo, hay un pequeño problema: para disfrutar de CSS Grid requieres tener el navegador actualizado, bastaría estar una sola versión detrás y todo se desmaquetaría. Y eso no está bien. Por lo que la mejor manera es usar CSS Grid y un fallback con flexbox para navegadores que no soporten grid. Sin embargo, es mucho trabajo, mucho código que escribir para cada caso. Es donde EDgrid hace el trabajo sucio por nosotros, creando la versión grid y el fallback con flexbox escribiendo una sola línea de código.

1.grid-container {
2 @include grid('.grid-item', 1 2 3 4, 1.5em)
3}
4

Donde

• grid-container es el selector del contenedor del grid
• grid-item es el selector de cada uno de los items del grid
• 1 2 3 4 es una lista de columnas separadas por espacios (cada numero representa el numero de columnas en cada breakpoint de EDgrid: 0, 640px, 1024px, 1440px)
• 1.5em es el espaciado vertical y horizontal entre cada item del grid

Este simple mixin se compilará en el siguiente CSS:

1.grid-container {
2    display       : -webkit-box;
3    display       : -ms-flexbox;
4    display       : flex;
5    -ms-flex-wrap : wrap;
6    flex-wrap     : wrap;
7    margin-left   : -.75em;
8    margin-right  : -.75em
9}
10
11.grid-container img {
12    display : block
13}
14
15body {
16    overflow-x : hidden
17}
18
19.grid-container > .grid-item {
20    width  : calc(100% - 1.5em);
21    margin : .75em
22}
23
24@media screen and (min-width : 640px) {
25    .grid-container > .grid-item {
26        width : calc(50% - 1.5em)
27    }
28}
29
30@media screen and (min-width : 1024px) {
31    .grid-container > .grid-item {
32        width : calc(33.33333% - 1.5em)
33    }
34}
35
36@media screen and (min-width : 1440px) {
37    .grid-container > .grid-item {
38        width : calc(25% - 1.5em)
39    }
40}
41
42@supports (grid-template-areas:"header") {
43    .grid-container {
44        display               : -ms-grid;
45        display               : grid;
46        grid-gap              : 1.5em;
47        margin-left           : 0;
48        margin-right          : 0;
49        -ms-grid-columns      :(1fr) [ 1 ];
50        grid-template-columns : repeat(1, 1fr)
51    }
52
53    body {
54        overflow-x : visible
55    }
56
57    @media screen and (min-width : 640px) {
58        .grid-container {
59            -ms-grid-columns      :(1fr) [ 2 ];
60            grid-template-columns : repeat(2, 1fr)
61        }
62    }
63
64    @media screen and (min-width : 1024px) {
65        .grid-container {
66            -ms-grid-columns      :(1fr) [ 3 ];
67            grid-template-columns : repeat(3, 1fr)
68        }
69    }
70
71    @media screen and (min-width : 1440px) {
72        .grid-container {
73            -ms-grid-columns      :(1fr) [ 4 ];
74            grid-template-columns : repeat(4, 1fr)
75        }
76    }
77
78    .grid-container > .grid-item {
79     width  : 100%;
80     margin : 0
81    }
82}
83

Usando Browserstack, nos hemos asegurado de la compatibilidad desde IE11. Por el momento, solo hemos implementado el componnente grid con CSS Grid (pronto lo haremos con otros componentes), y solo puedes usar esta funcionalidad con Sass.

¿Qué esperas? Empieza a usar CSS Grid en tus proyectos hoy mismo con la primera librería para RWD que lo soporta.

Por cierto, nuestra vista de cursos, ya usa CSS Grid hace semanas (prueba haciéndole F12)

EDgrid en Github.

Documentación de EDgrid