1
resposta

Align-self não funciona

Estou tentando alinhar a caixa de vídeos recentes com o Vídeo em Destaque utilizando align-self, porém, a propriedade não funciona por nada...

I

A caixa de vídeos recentes permanece centralizada:

1 resposta

Oiii, Sandro! Tudo bem?

Para alinhar a caixa de vídeos recentes com a caixa de vídeo em destaque é necessário organizar o main que envolve essas caixas com o grid-template-areas. No curso o professor faz isso usando a classe .principal do main.

No css, dentro do @media screen and (min-width: 1440px) temos a seguinte organização:

.principal {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 
            "titulo-pagina titulo-pagina titulo-pagina"
            "destaque-video destaque-video videos-recentes"
            "secao-videos secao-videos secao-videos"
            "produtos-recentes destaque-produtos destaque-produtos"
            "secao-produtos secao-produtos secao-produtos"       
        ;
        column-gap: 32px;
        padding: 16px 60px;
        grid-column: 2;
    }

E no final do código temos a organização com o grid-areas de cada uma dessas classes do grid-template-areas, por exemplo:

.destaque-video {
        grid-area: destaque-video;
    }

    .videos-recentes {
        grid-area: videos-recentes;
    }

Para ficar mais claro, eu recomendo assistir essa aula do curso e comparar o código: https://cursos.alura.com.br/course/css-dispondo-elementos-flexbox-grid/task/97320

E se houver mais dúvidas, você pode compartilhar aqui seu código :)

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!