Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas
Clase 12 de 24 • Curso de Frontend Developer
Resumen
El display flex y grid son formas de visualización de elementos recientes y cada uno tienen sus propias características para crear interfaces de manera efectiva, a partir de un contenedor padre que dotará a los elementos hijos de superpoderes del posicionamiento.
Ambas son herramientas muy útiles en el desarrollo, especialmente para la creación de interfaces amigables al usuario y aptas para cualquier dispositivo, que este último se lo conoce como responsive design.
Sin embargo, ambas herramientas tienen temas muy extensos de entender, y como mi intención no es estresarte con demasiada información, simplemente ten presente de manera general en qué consisten.
Qué es flexbox
Flexbox consiste en el ordenamiento de elementos hijos en un solo eje, por defecto horizontalmente. El elemento padre o contenedor deberá contener la propiedad display con el valor flex. A partir de aquí, ya puedes ordenar los hijos según sea necesario.
Cuando domines los temas básicos de CSS y las propiedades más usadas, revisadas en el contenido del curso, sigue con Flexbox. Puedes utilizar la guía y el curso en Platzi sobre el tema:
Qué es grid
Grid consiste en el ordenamiento de elementos hijos en dos ejes, como si fuera una cuadrícula o tabla. El elemento padre o contenedor deberá contener la propiedad display con el valor grid y debes definir las medidas de las columnas y de las filas. A partir de aquí, ya puedes ordenar los hijos según sea necesario.
Cuando domines lo básico de Flexbox, sigue con Grid. Puedes utilizar la guía y el curso en Platzi que tenemos sobre el tema:
Y cuando domines lo básico de ambas, sigue con el Curso de Diseño Web con CSS Grid y Flexbox. Para que aprendas a emplear y combinar ambas herramientas correctamente.
Recuerda crear un proyecto, ejercicios o lo que se te ocurra para practicar estos conceptos. ¡La práctica hace al maestro!
Contribución creada por Andrés Guano (Platzi Contributor).