Entrar Ainda não tem acesso?
1
resposta

[Sugestão] otimização sem gambiarra

Referente ao curso HTML e CSS: responsividade em layouts, no capítulo Avançando em técnicas de responsividade e componentização e atividade Solução do desafio da seção busca por categoria

por Luis Carlos Jr
| 41k xp | 73 posts
.section-categories {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.categories-grid {
  width: 312px;
  height: 952px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 88px;
}

.categories-grid a {
  display: block;
  width: 312px;
  height: 220px;
  background-color: var(--background-tertiary-color);
  color: var(--text-body-color);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.categories-grid img {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}

.categories-grid h3 {
  font-weight: var(--highlight-text-weight);
  font-size: 28px;
}

@media screen and (min-width: 768px) {
  .categories-grid {
    flex-direction: row;
    width: 648px;
    height: 464px;
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 1440px) {
  .categories-grid {
    width: 1197px;
    height: 220px;
  }

  .categories-grid a{
    width: 281px;
  }

  .categories-grid a:hover{
    background-color: #D9D9D9;
  }
}

Lá no Figma diz que as imagens tem 80 x 80, então não tem como uma ser mais alta que a outra, estre outras coisas. Display flex resolve nos cards

1 resposta
por Rafaela Petelin Silvério
| 1850.2k xp | 4227 posts
Alura Scuba Team

Oi, Luis! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Gostei da forma como você organizou os cards com display: flex, usando gap e ajustando o layout com @media para 768px e 1440px. Isso deixa a responsividade bem clara e evita “gambiarras”, porque cada breakpoint muda apenas o que precisa.

Uma dica interessante para o futuro é usar grid para simplificar a distribuição dos cards e reduzir a necessidade de definir width e height fixos. Veja este exemplo: 


.categories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1440px) {
  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Esse código cria uma grade que adapta a quantidade de colunas por breakpoint, mantendo o espaçamento com gap e deixando os cards mais consistentes no alinhamento.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA