Índice

1. Introducción
2. A Complete Guide to Flexbox
3. A Complete Guide to CSSGrid
4. Recomendaciones

1. Introducción

Desde la llegada de Flexbox y CSSGrid el posicionamiento de elementos en la web se ha facilitado mucho, ya no es necesario escribir código raro usando las propiedades position o float ya que las mismas no fueron creadas para dichos propósitos.

Ahora bien, aprender Flexbox o CSSGrid tampoco es tarea del todo sencilla, hay que dedicarle tiempo para comprender tanto los conceptos teóricos de su funcionamiento como para practicarlos y usarlos en proyectos reales.

Cuando estaba en la universidad un docente que nos enseñaba JavaScript en los exámenes nos decía: "Usen todo lo que quieran en el parcial, es bobo aprenderse los métodos y propiedades de una tecnología de memoria, cuando trabajen de desarrolladores siempre podrán consultar en Google cualquier duda que tengan." Hoy, años después de oir esas palabras me doy cuenta que efectivamente tenia razón al 100%.

Sin más dilaciones les paso 2 links donde explican con "chubis" TODAS las propiedades que se pueden usar tanto con Flexbox como con CSSGrid. (Ambos recursos están en inglés, pero nada que un traductor no pueda solucionar)

2. A Complete Guide to Flexbox

Esta guía completa explica todo sobre flexbox, centrándose en todas las diferentes propiedades posibles para el elemento principal (el contenedor flexible) y los elementos secundarios (los elementos flexibles). También incluye historial, demostraciones, patrones y una tabla de soporte del navegador.

Autor: Chris Coyier | Publicado el 08 de abril de 2013 (Actualizado: 07 de abril de 2021)

3. A Complete Guide to CSSGrid

Guía completa para la cuadrícula CSS, que se centra en todas las configuraciones tanto para el contenedor principal de la cuadrícula como para los elementos secundarios de la cuadrícula.

Autor: Chris House | Publicado el 06 de noviembre de 2016 (Actualizado: 10 de marzo de 2021)

4. Recomendaciones

• Usa ambas guías para comprender el uso de las tecnologías, explican muy bien y son bastante completas.
• Guarda ambos links en los marcadores de tu navegador favorito para futura consulta, cuando no recuerdes alguna propiedad tendrás a la mano la guía para poder seguir desarrollando sin perder mucho tiempo.
• Complementa ambas guías desarrollando lo que coloquialmente suelo llamar "ejemplos de juguete" desarrolla ejercicios que no tengan sentido, solo para probar y experimentar un poco, te ayudará bastante.
• Por último, desarrolla ejemplo reales, puedes seguir tutoriales en youtube donde desarrollan páginas completas desde 0, esto complementará tu aprendizaje