Introducción a CSS Grid layout

Introducción a CSS Grid layout

En esta introducción a CSS Grid layout veremos a ver las características que nos va a ofrecer esta especificación y las ventajas que vamos a obtener al combinarlo con otras propiedades de display como Flexbox.

Como siempre, la introducción de una nueva especificación CSS conlleva su largo periodo de desarrollo y adaptación en los navegadores, pero por suerte, desde hace unos meses los navegadores más usados tienen activado de forma predeterminada CSS Grid layout.

Así que es el momento idóneo para empezar a usar esta especificación en nuestro flujo de trabajo.

-

Charla dada en: Meetup Murcia Frontend (25/01/2018).

Repositorio en GitHub con la presentación y los ejemplos.

Enlaces que contiene la presentación:

Ejemplos (live coding):
Ejemplo 01: Creación de grid simple.
Ejemplo 02: Grid simple con reordenación de grid tracks.
Ejemplo 03: Estructura de grid basada en áreas.
Extra: Here we go!! Desarrollo de un grid para crear ¡Pixel art!

Referencias:
La historia de CSS Grid a través de sus creadores.
Can i use: CSS Grid layout.
Glosario de propiedades.
Guía completa sobre CSS Grid layout (CSS-tricks).
Curso CSS Grid (4 horas - 25 vídeos).
Curso Grid práctico por Juan Andrés Núñez en español.
CSS Grid explicado con ejemplos.
Listado de pens utilizando CSS Grid (Codepen).
Introducción a CSS Grid layout (Firefox devtools).

C6eef2f316659472539e666f4da9d539?s=128

Juan Carlos Ruiz

January 25, 2018
Tweet