footer.css

Oi Anderson, tudo bem?

Sinto muito que esteja enfrentando dificuldades! Estou aqui para ajudar. Se puder me contar qual é a sua dificuldade, posso tentar resolver junto com você. Lembre-se, o importante é não desistir e continuar com dedicação e esforço.

Caso queira consultar o projeto da aula para sanar alguma dúvida você pode baixar o zip do projeto final ou acessar os arquivos no GitHub!

Estou torcendo por você e disponível para ajudar no que for preciso.

Abraços e bons estudos!

Minha dúvida é mais em que como formar o código das linhas e colunas

Oi Anderson!

Alguns passos para finalizar o grid do footer:

1. No arquivo rodape.css, você irá chamar a classe .rodape:

.rodape {
    display: grid;
    grid-template-rows: repeat(2, 50%);
    grid-template-columns: auto 2fr auto 1fr repeat(3, auto) 1fr auto 1.5fr repeat(2, auto);
    align-items: center;
    column-gap: 0.5rem;   
}

2. Posicionando os Grid Items:

• Posicionamento em relação ao grid-row:

.rodape__imagem {
    grid-row: 1/3;
}

.rodape__subtitulo, .rodape__horario--inicio, .barra__container--reproducao, .rodape__botao--volume-down, .rodape__horario--termino, .barra__container--volume, .rodape__botao--volume-up  {
    grid-row: 2/3;
}

• Posicionamento em relação ao grid-column:

.rodape__botao--voltar {
    grid-column: 4/5;
}

.barra__container--reproducao {
    grid-column: 4/9;
}

Perceba que posicionando alguns itens, os outros já vão automaticamente para o seu lugar correto, essa é a magia do grid!

3. Alinhando individualmente:

.rodape__botao--voltar {
    grid-column: 4/5;
    justify-self: end;
}

.rodape__botao--proximo {
    justify-self: left;
}

.rodape__botao--volume-down {
    justify-self: end;
}

Pronto, seguindo isso o grid do footer está finalizado!

Espero ter conseguido ajudar, qualquer dúvida estou à disposição.

Abraços e bons estudos!