Domina el sistema de cuadrículas en tu página web
CSS Grid es una poderosa herramienta que revoluciona la forma en que diseñamos layouts para nuestros sitios web. En este proyecto exploraremos cómo dominar este sistema de rejillas y aprovecharlo al máximo en tus proyectos.
Grid Container
Grid Item
Grid Line
Grid Cell
Grid Area
Flexbox vs Grid
Flexbox
Unidimensional: Se enfoca en distribuir elementos en un solo eje (horizontal o vertical)
1
2
3
Grid
Bidimensional: Trabaja simultáneamente con filas y columnas
1
2
3
4
5
6
Ejemplos del proyecto
Código básico de CSS Grid
.contenedor {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 100px auto 100px;
gap: 20px;
}
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.item-2 {
grid-column: 3;
grid-row: 1 / 3;
}
¡Únete a la comunidad FemCoders Club!
Comparte tus creaciones usando CSS Grid con el hashtag #FemCodersClubGrid