Vista previa
Instrucciones:
- Definir un contenedor padre
- Agregar caja de imagen (o cualquier módulo)
- Definir una clase diferente para cada caja/módulo
- Tener siempre en cuenta utilizar el atributo «selector» para que el CSS solo se aplique a ese elemento y no globalmente en el sitio web
- Agregar el CSS al contenedor padre
- Asignar una letra a cada caja/módulo haciendo uso de las clases asignadas anteriormente
- Cuando quiero aplicarlo a un módulo al cual no puedo definir clases específicas a los elementos hijos debo utilizar :nth-child( [N° del elemento hijo a seleccionar] ) Ver aplicación
Códigos
CSS
selector{
display: grid;
grid-template-areas:
"a a a b b b"
"c c d d e e"
"f f f f g g"
"h i j k l l";
}
.card1{
grid-area: a;
}
.card2{
grid-area: b;
}
.card3{
grid-area: c;
}
.card4{
grid-area: d;
}
.card5{
grid-area: e;
}
.card6{
grid-area: f;
}
.card7{
grid-area: g;
}
.card8{
grid-area: h;
}
.card9{
grid-area: i;
}
.card10{
grid-area: j;
}
.card11{
grid-area: k;
}
.card12{
grid-area: l;
}
@media(max-width: 767px){
selector{
display: flex;
}
}
@media(min-width: 768px) and (max-width: 1024px){
selector{
grid-template-areas:
"a b"
"c d"
"e e"
"f f"
"f f"
"g h"
"i i"
"j k"
"l l";
}
}