Entrar Ainda não tem acesso?
2
respostas

Dúvida Aula 2 Aula 5 - itens nao ocupam o espaço

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

por Ricardo Mellegari de Oliveira
| 173.9k xp | 84 posts
Analista de Projetos e Melhoria Contínua

Olá! Seguindo o video ainda fico com o problema que os itens não estão preenchendo o lugar correto como na imagem https://prnt.sc/t3aty2

segue o CSS abaixo

.destaques {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; /* distribuição igual da largura das colunas*/
    grid-template-rows: 33.33% 33.33% 33.33%; 
    height: calc(100vh - 50px); /*o sinal de operação deve ter espaço antes e depois para funcionar*/

}
/*forma mais detalhada de escrever o código*/
.destaques__principal{ 
    background-image: url("../img/fortnite.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}

.destaques__secundario:nth-child(2) {/*position / size repeat;*/
    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__categoria {
    grid-column: 1 / 3;
    grid-row: 3 / 3;
}

.destaques__categorias___lista{
    display: flex; /*quebras os itens*/
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}

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

.destaques__categorias___link{
    color: inherit;
}
2 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Ricardo, tudo bem?

Acreditando que o seu arquivo HTML esteja igual ao do instrutor, a classe .destaques-categoria foi declarada como destaque-categorias, faltando um s no final. Veja:

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

Faça a modificação e testa se deu certo :}

por ISAC DO AMARAL BUENO
| 159.9k xp | 107 posts

Boa noite Ricardo, tudo bem? Acabei de passar por este erro, oque reparei foi o seguinte, os elementos so ficam igual mostrado na aula, caso seja aplicado o estilo no item e no link assim :

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

.destaques__categorias___link {
    color: inherit;
}

Entao acredito que na parte da escrita no curso teve algum equivoco, eu acredito né, não sei, porem fazendo essa parte do código logo depois deu certo.

.destaques__categorias {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}
.destaques__categorias___lista {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-around; 
}
.destaques__categorias___item {
    align-items: center;
    background: #fdfdfd;
    border-left: 5px solid transparent;
    color: #333333;
    display: flex;
    padding: 1rem;
    width: 50%;
}

.destaques__categorias___link {
    color: inherit;
}

Espero te te ajudado.