Não consegui entender o porque que, ao colocar o menu lateral ocupando 2 linhas, o conteúdo principal "subiu".
Não consegui entender o porque que, ao colocar o menu lateral ocupando 2 linhas, o conteúdo principal "subiu".
Olá!
O body foi estruturado para ter 2 colunas. Como o body possui 3 elementos: header, nav (o menu lateral) e main (o conteúdo principal), o header ocupa a 1ª coluna, o menu lateral a 2ª e o conteúdo principal "cai" para a outra linha, ocupando a 1ª coluna dessa 2ª linha.
| header | menu lateral |
| conteúdo principal | <posição vazia> |
Na aula, o instrutor colocou o menu lateral para ser a 1ª coluna (grid-column: 1;), então o header foi pra 2ª coluna e o conteúdo principal continuou no lugar, 2ª linha/1ª coluna.
| menu lateral | header |
| conteúdo principal | <posição vazia> |
Aí, como o instrutor marcou para o menu lateral ocupar 2 linhas, o conteúdo principal desloca para a próxima posição vazia, que é a 2ª coluna da 2ª linha
| menu lateral | header |
| menu lateral | conteúdo principal |
Essa sensação de que o conteúdo principal "subiu" foi por causa desse deslocamento dele para a 2ª coluna, que antes estava "ocupado" por um vazio.