5
respostas

Aula 2 - CSS GRID - Estilizando os destaques

Referente ao curso CSS Grid: simplificando layouts, no capítulo Criando o layout da seção de destaques e atividade Estilizando os destaques

por Alan
| 219.5k xp | 7 posts
Desenvolvedor Júnior

Na aula é apresentado o código que segue abaixo, mas reproduzindo o mesmo as categorias não ficaram cada uma em seu devido lugar. Foi realizado algo diferente que não mostrou na aula? Como corrigir sendo que existe apenas 1 linha e duas colunas e deveria se transformar em 2 linhas e 2 colunas?

.destaques__categorias {
    grid-column: 1 / 3;
    grid-row: 3 / 3;
}

.destaques__categorias___lista {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}

.destaques__categorias___item {
    align-items: center;
    background: #FDFDFD;
    border-left: 5px solid transparent;
    color: #333333;
    display: flex;
    padding: 1rem;
    width: 50px;
}

.destaques__categorias___link {
    color: inherit;
}

.destaques__titulo {
    background: rgba(0, 0, 0, .5);
    color: #fdfdfd;
    padding: .6rem;
    text-align: center;
    width: 100%;
}

.caixa {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}
5 respostas
por Matheus Henrique Castiglioni
| 5303.5k xp | 9004 posts
Instrutor Senior Software Engineer

Fala aí Alan, tudo bem? Esse trecho de código parece estar correto, consegue postar seu HTML e CSS completo? Ficaria mais fácil tentar lhe ajudar.

Fico no aguardo.

por Alan
| 219.5k xp | 7 posts
Desenvolvedor Júnior

Seguem abaixo, CSS e HTML

.destaques {
    display: grid;
    grid-gap: .2rem;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(100vh - 50px);
}

.destaques__principal {
    background: url(../img/fortnite.jpg) center / cover no-repeat;
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.destaques__secundario:nth-child(2) {
    background: url(../img/pubg.jpg) center / cover no-repeat;
    grid-column: 4 / 4;
    grid-row: 1 / 1;
}

.destaques__secundario:nth-child(3) {
    background: url(../img/slack.png) center / cover no-repeat;
    grid-column: 4 / 4;
    grid-row: 2 / 2;
}

.destaques__secundario:nth-child(4) {
    background: url(../img/whatsapp.png) center / cover no-repeat;
    grid-column: 4 / 4;
    grid-row: 3 / 3;
}

.destaques__secundario:nth-child(5) {
    background: url(../img/cs-go.jpg) center / cover no-repeat;
    grid-column: 3 / 3;
    grid-row: 3 / 3;
}

.destaques__categorias {
    grid-column: 1 / 3;
    grid-row: 3 / 3;
}

.destaques__categorias___lista {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}

.destaques__categorias___item {
    align-items: center;
    background: #FDFDFD;
    border-left: 5px solid transparent;
    color: #333333;
    display: flex;
    padding: 1rem;
    width: 50px;
}

.destaques__categorias___link {
    color: inherit;
}

.destaques__titulo {
    background: rgba(0, 0, 0, .5);
    color: #fdfdfd;
    padding: .6rem;
    text-align: center;
    width: 100%;
}

.caixa {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Alura Store | Baixe nossos aplicativos e jogos</title>
    <link href="./assets/css/normalize.css" rel="stylesheet">
    <link href="./assets/css/reset.css" rel="stylesheet">
    <link href="./assets/css/style.css" rel="stylesheet">
    <link href="assets/css/destaques.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/populares.css">
</head>

<body class="app">
    <header class="cabecalho">Cabeçalho</header>
    <main class="conteudo">Conteúdo

        <section class="destaques">
            <div class="destaques__principal caixa">
                <h3 class="destaques__titulo">Fortnite</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">PUBG</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">Slack</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">Whatsapp</h3>
            </div>
            <div class="destaques__secundario caixa">
                <h3 class="destaques__titulo">CS: GO</h3>
            </div>
            <div class="destaques__categorias">
                <ul class="destaques__categorias___lista">
                    <li class="destaques__categorias___item">
                        <a class="destaques__categorias___link" href="#">
                            <i class="destaques__categorias___icone fab fa-buromobelexperte"></i> Aplicativos populares
                        </a>
                    </li>
                    <li class="destaques__categorias___item">
                        <a class="destaques__categorias___link" href="#">
                            <i class="fas fa-list-ol"></i> Jogos populares
                        </a>
                    </li>
                    <li class="destaques__categorias___item">
                        <a class="destaques__categorias___link" href="#">
                            <i class="far fa-star"></i> Em Destaque
                        </a>
                    </li>
                    <li class="destaques__categorias___item">
                        <a class="destaques__categorias___link" href="#">
                            <i class="far fa-bell"></i> Lançamentos
                        </a>
                    </li>
                </ul>
            </div>
        </section>
    </main>
    <footer class="rodape">Rodapé</footer>
    <script src="./assets/js/fontawesome.all.min.js"></script>
</body>

</html>
por Matheus Henrique Castiglioni
| 5303.5k xp | 9004 posts
Instrutor Senior Software Engineer

Fala Alan, tudo bem? Acho que o erro pode estar no .destaques__categorias___item, repare que você definiu a largura (width) em px, onde deveria ser em %.

.destaques__categorias___item {
    align-items: center;
    background: #FDFDFD;
    border-left: 5px solid transparent;
    color: #333333;
    display: flex;
    padding: 1rem;
    width: 50px; // aqui
}

Tente mudar para:

.destaques__categorias___item {
    align-items: center;
    background: #FDFDFD;
    border-left: 5px solid transparent;
    color: #333333;
    display: flex;
    padding: 1rem;
    width: 50%; // aqui
}

Pode ser que resolva o problema.

Espero ter ajudado.

por Alan
| 219.5k xp | 7 posts
Desenvolvedor Júnior

Não resolveu e só com a porcentagem alterou todo o layout da pagina. Acredito ser uma incompatibilidade de Browser visto que no curso o instrutor estava usando o Safari mas testei em outros navagadores, ficou todos com o layout quebrados.

por Matheus Henrique Castiglioni
| 5303.5k xp | 9004 posts
Instrutor Senior Software Engineer

Certo, consegue compartilhar o projeto comigo? Eu olho aqui dai, pois com os códigos que vocÊ me passou apenas mudando de px para % funcionou.

Fico no aguardo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software