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.
„ÉĽ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 , esto complementar√° tu aprendizaje

test

Discussion (0)