Multimedia Universitat Oberta de Catalunya

Flexbox vs CSS Grid

Mireia Tort Noguera

Últimamente se ha discutido mucho sobre si, para maquetar y utilizar parrillas (grids) en un documento web es mejor utilizar Flexbox o CSS Grid, pero, en realidad, son dos sistemas que se complementan.

También es interesante y clarificador leer este apunte de Rachel Andrew Should I use Grid or Flexbox? (marzo 2016), para ver cuando es mejor utilizar Flexbox y cuando optar por el uso de CSS Grid.

De todos modos, si necesitáis empezar desde cero en estas metodologías de maquetación avanzada en CSS, os recomendamos algunos enlaces y herramientas para facilitaros el trabajo.

Aprender Flexbox

A friendly introduction to Flexbox for begginers (Sitepoint, julio 2018)

Using Flexbox today, un artículo cargado de ejemplos de Chris Wright (gener 2015)

Flex Cheat Sheet, para aprender los principios básicos de Flexbox.

Flexbox Patterns, para aprender a construir interfaces con Flexbox a partir de estructuras de ejemplo, con el código incluído.

Flexbox Playground, para aprender las propiedades de Flexbox rápidamente.

Flexbox froggy, un juego de navegador para aprender los conceptos básicos de Flexbox.

Flexbox.io un curso de Wes Bos con una veintena de videos para aprender Flexbox desde cero. Es un curso gratuito pero requiere registro vía e-mail.

Aprender CSS Grid Layout

An introduction to the CSS Grid Layout Module, Ahmad Ajmi, Sitepoint (julio 2018).

Grid by example, everything you need to learn CSS Grid Layout, Rachel Andrew.

Introduction to CSS Grid Layout, una guía interactiva de Firefox DevTools.

CSS Grid Cheat Sheet, guía visual de CSS Grid.

Griddy, para aprender a utilizar CSS Grid.

CSS Garden, un juego de navegador para aprender los conceptos básicos de CSS Grid.

CSSgrid.io, un curso de Wes Bros con videos para aprender CSS Grid desde cero. Es un curso gratuito, pero es necesario inscribirse vía e-mail.

Finalmente, un vez introducidos en la materia, también os dejamos un artículo de Manuel Matuzović, Progressively Enhancing CSS Layout: From floats to Flexbox to Grid, que, entre muchas otras cosas, apunta a la idea que CSS Grid es una de les novedades más emocionantes en diseño web desde la llegada del Responsive Web Design.