Lista Destaques e Display flex | CSS Grid: simplificando layouts

Solucionado (ver solução)

Solucionado
(ver solução)

6
respostas

Referente ao curso CSS Grid: simplificando layouts, no capítulo Criando o layout da seção de destaques e atividade Estilizando os destaques

por allan correa andrade

| 37k xp | 6 posts

Olá a todos, estou com um problema referente aos tamanhos do display flex, da aula 2.5

Vou listar abaixo:

o original da aula
o original no meu pc
o 'editado' no meu pc

Código Original CSS

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

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

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

Imagem Original da aula: Original Aula Nota-se que a lista destaques comporta-se da maneira correta.

Agora o original no meu PC:

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

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

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

Imagem do original no meu pc Original meu PC Nota-se que o código CSS é o mesmo. Estou, nessa imagem, usando o DevTools para redimensionar a tela para Notebook 1024px, que acredito ser o mais próximo do professor, tendo em vista que minha tela é 1980px.

Agora vou mostrar como ficou a disposição dos elementos com algumas alterações:

CSS Alterado

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

.destaques__categorias___lista {
    display: flex;

    flex-wrap: wrap;
    height: 100%;
}

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

Ficando então dessa maneira: CSS Alterado Edit1: Só para ficar mais prático, as alterações que fiz foram:

Remover o space-between dos itens da lista;
Alterar o width dos itens para se ajustarem ao tamanho da tela.

Então, a partir disso, tenho algumas dúvidas, como:

Por qual motivo o código original da aula não se adequa ao meu layout como no do professor ?
As alterações que fiz foram plausíveis ou gambiarras para poder adequar o original ao meu projeto ? -

Agradeço a todos pela atenção e desculpem o post longo !

6 respostas

por Arthur Schulle Konrad

| 125.8k xp | 30 posts

Analista Frontend

25/09/2022

Bom dia Allan, tudo bom?

Vamos as duas perguntas:

1 - Por qual motivo pode estar dando esta divergência:

pode ser html;
pode ser que o font-size no seu body esteja diferente do curso;

Poderias enviar trecho do html em questão? E do font-size do body comparado ao do curso?

2 - Se isso é "gambiarra" ou "plausível":

Bom, o ideal é fazer conforme o curso. Para no futuro não ter problemas quanto a isso. Isso falando em quesito de aprendizado.

Agora em quesito profissional, das boas práticas, colocar um valor quebrado na width para que comporte um tamanho específico de tela, é considerado uma má pratica, pois vai depender do tamanho de tela certo para funcionar, sendo assim, não responsivo.

Estou disposto a ajuda-lo a entender o que está acontecendo no seu projeto, qualquer coisa podemos trocar ideia por aqui.

Atenciosamente, tuio

por allan correa andrade

| 37k xp | 6 posts

25/09/2022

Opa tuio, agradeço sua atenção.

Já não é o primeiro curso html / css que tenho problemas quanto a resolução dos projetos...

Vou enviar o código html abaixo

<!DOCTYPE html>
<html lang="en">
<head>

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

</head>

<body class="app"> 
    <header class="cabecalho">Cabeçalho</header>     
    <main class="conteudo">
        <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="js/fontawesome.all.min.js"></script>

</body>
</html>

No CSS do curso até o momento, não foram feitas alterações em tamanho de fontes, apenas o modelo delas, porém existe um arquivo normalize.css que veio com o pacote do curso, onde já foi puxado para dentro do html.

Vou mandar abaixo o link do GitHub caso ache melhor conferir https://github.com/savemybeard/cssgridsimples.git

Está tudo atualizado até o momento em que criei o tópico

Segue abaixo também o código completo do style.css e destaques.css

.app {
    background: #f1f1f1;
    display: grid;  
    font-family: Arial, Helvetica, sans-serif;
    grid-template-areas: /*para separar em template em áreas */
        "cabecalho" /* definindo as áreas do template */
        "conteudo"
        "rodape";
    grid-template-columns: auto; /* definindo que as colunas terão tamanho automático de acordo com o conteudo inserido */
    grid-template-rows: 50px auto auto; /*cabecalho 50px, conteudo e rodape auto */
}

.cabecalho {
    grid-area: cabecalho;   /* diz ao grid do body que esse é o cabecalho */
}

.conteudo {
    grid-area: conteudo;
}

.rodape {
    grid-area: rodape;
}

por allan correa andrade

| 37k xp | 6 posts

25/09/2022

Segue o código do destaques.css

.destaques {
    display: grid;
    /* definimos as 4 colunas com 25% de tamanho do grid */
    grid-template-columns: 25% 25% 25% 25%;
    /* definimos que as 3 LINHAS terão 33.33% do tamanho do grid */
    grid-template-rows: 33.33% 33.33% 33.33%;
    /* os destaques terão 100vh (tamanho total da página) menos os 50px do cabeçalho */
    height: calc(100vh - 50px);

}

.destaques__principal {
    background: url(../img/fortnite.jpg) center / cover no-repeat;
    /* o código simplificado acima ^^^^^^ 
    background-image: url(../img/fortnite.jpg);
    /** Para a imagem não se repetir */
    /* background-repeat: no-repeat;
    /** Para centralizar a imagem */
    /* background-position: center;
    /** Para a imagem ocuapr toda a div, toda a área designada para ela */
    /*background-size: cover;

    /*
    * Definimos o início e o fim do destaque FORTNITE.
    * Começa na primeira coluna e vai até a quarta coluna.
    * O limite das colunas/linhas é sempre 1 a mais do que deve ocupar
    * Se deve ocupar 3 linhas, então o comando é 4
    * Se deve ocupar 2 colunas, então o comando é 3
    **/
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}


/* nth-child (2) significa que estamos exclusivamente arrumando
                 o segundo filho da SECTION DESTAQUES.
                 Para modificar exclisivamente ele. 
**/                 
.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;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100%;
}

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

Favor desconsiderar os comentários, são apenas para meu entendimento didático hehehe

por Arthur Schulle Konrad

| 125.8k xp | 30 posts

Analista Frontend

25/09/2022

Opa, show, o link do github ajudou sim, vou dar uma olhada e te retorno!

solução!

por Arthur Schulle Konrad

| 125.8k xp | 30 posts

Analista Frontend

25/09/2022

Olá Allan, desculpa demora!

Demorei um pouco até achar o problema :D.

É bem simples na real, seu reset css está diferente do que o curso apresentou, esta faltando uma propriedade importante, o box-sizing:

* {
    box-sizing: border-box;
}

Só adicionar isto no seu reset css e vai dar tudo certo!

Qualquer outra dúvida estou a disposição para conversarmos!

Atenciosamente, tuio

por allan correa andrade

| 37k xp | 6 posts

25/09/2022

Tuio, muito agradecido pela sua atenção e vontade de ajudar. Eu rodei o arquivo normalize.css de cabo a rabo, pensando que era lá o problema, mas não passou pela minha cabeça de analisar o reset.css.

Agradeço muito mesmo a sua atenção e com dedicação e vontade chegarei perto de seus conhecimentos !

Vou marcar como concluído o tópico \o/