Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Solução do exercício e dúvida

Minha solução para o exercício ficou como abaixo, e surgiu uma dúvida: nos casos onde o componente ocupa apenas 1 linha ou 1 coluna, é necessário colocar o "grid-row: span 1" ou "grid-column: span 1"? Pois não coloquei e deu certo igual, mas qual a boa prática neste caso: colocar ou não colocar (quando o valor for apenas 1)?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.corpo {
    background-color: #444444;
    padding: 8px;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

.cabecalho {
    background-color: #cc2a2a;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-column: span 4;
}

.lateral {
    background-color: #45cc2a;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-row: span 3;
}

.meio {
    background-color: #2aa6cc;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-column: span 2;
    grid-row: span 3;
}

.direita-cima {
    background-color: #352acc;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
}

.direita-baixo {
    background-color: #cc2a96;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-row: span 2;
}
1 resposta
solução!

Boa Tarde Kimberly,

Como o instrutor lembrou na aula, o span tem a função de unir duas células, como ele mesmo deu de exemplo quando fazemos uma tabela no excel e queremos usar duas células para um único conteúdo. No caso do excel usamos a opção mesclar. Nesse caso quando está sendo utilizado uma única célula não é preciso utilizar span.

Espero ter ajudado.