CSS es una de las maneras más modernas de posicionar elementos con CSS, pero también es muy extensa, en esta clase aprenderás de forma sencilla cómo usarlo e incluso cómo sustituir Flex-Box, tendrás la oportunidad de decidir cuál es tu favorito al mismo tiempo que serás capaz de usar cualquiera de los 2 métodos.

¿Porqué CSS Grid?

Uno de los procesos más problemáticos y frustrantes de CSS, sobre todo para principiantes, es el proceso de colocar y distribuir los elementos a lo largo de una página. Mecanismos como posicionamiento, floats o elementos en bloque o en línea, suelen ser insuficientes (o muy complejos) para crear un layout o estructuras para páginas web actuales.

El sistema flexbox es una gran mejora, sin embargo, está orientado a estructuras de una sola dimensión, por lo que aún necesitamos algo más potente para estructuras web. Con el paso del tiempo, muchos frameworks y librerías utilizan un sistema grid donde definen una cuadrícula determinada, y modificando los nombres de las clases de los elementos HTML, podemos darle tamaño, posición o colocación.

Grid CSS nace de esa necesidad, y recoge las ventajas de ese sistema, añadiendo numerosas mejoras y características que permiten crear rápidamente cuadrículas sencillas y potentes de forma prácticamente instantánea.

¿Serás capaz de sustituir Flex-Box por CSS Grid?

Codepen:

Dando clic en fork puedes clonarlo

Pen de BlisS

Card de opciones con CSS Grid

Happy Coding! ❤

Recursos extra

¿List@ para ver todo el curso? Prepárate porque apenas estamos comenzando 🚀

¡Desbloquea el curso completo y conviértete en un PRO del desarrollo web! 🫶🏻 .