Olá, tentei fazer de dois jeitos ensinados pela instrutora, acredito que deu certo.
Usando o grid-template-areas:
.grid-container {
display: grid;
grid-template-areas:
"funk pop hip"
"rock rock hip"
"rag rag rap";
}
.item1 {
grid-area: funk;
}
.item2 {
grid-area: pop;
}
.item3 {
grid-area: hip;
}
.item4 {
grid-area: rock;
}
.item5 {
grid-area: rag;
}
.item6 {
grid-area: rap;
}Usando column e row.
.grid-container {
display: grid;
}
.item1 {
grid-column: 1/2;
grid-row: 1/2;
}
.item2 {
grid-column: 2/3;
grid-row: 1/2;
}
.item3 {
grid-column: 3/3;
grid-row: 1/3;
}
.item4 {
grid-column: 1/3;
grid-row: 2/3;
}
.item5 {
grid-column: 1/3;
grid-row: 3/3;
}
.item6 {
grid-column: 3/3;
grid-row: 3/4
}
