DEV Community

loading...

Las mejores guías completas para Flexbox y CSSGrid 😎

dux
Literatura, tecnologĂ­a y cafĂ© (mucho cafĂ© ☕) es todo lo que necesito.
・Updated on ・2 min read

Í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

test

Discussion (0)