Entrar Ainda não tem acesso?
Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
2
respostas

[Sugestão] codereview - payment section

Referente ao curso HTML e CSS: responsividade em layouts, no capítulo Aplicando técnicas de CSS Grid e atividade Corrigindo oficialmente seus primeiros bugs

por Esperidião Ribbeiro Vaz Curvo
| 20.9k xp | 29 posts

eu usei o flex de uma forma diferente entre mobile, tablet e desktop

segue abaixo o meu css para apreciação: 

.payments .content-container .image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  height: 460px;
  margin-top: 24px;
  width: 100%;
}
.payments .content-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.payments .content-container .image-gallery .image.bag {
  background: url(../img/baggage-mobile.jpg) no-repeat;
  background-size: cover;
}
.payments .content-container .image-gallery .image.passport {
  background: url(../img/passport-mobile.jpg) no-repeat;
  background-size: cover;
}
.payments .content-container .image-gallery .image.bridge {
  background: url(../img/bridge-mobile.jpg) no-repeat;
  background-size: cover;
}
.payments .content-container .image-gallery .image.colspan-2 {
  grid-column: span 2;
}

@media screen and (min-width: 768px) {
  .payments .content-container .image-gallery .image.bag {
    background: url(../img/baggage-tablet.jpg) no-repeat;
    background-size: cover;
  }
  .payments .content-container .image-gallery .image.passport {
    background: url(../img/passport-tablet.jpg) no-repeat;
    background-size: cover;
  }
  .payments .content-container .image-gallery .image.bridge {
    background: url(../img/bridge-tablet.jpg) no-repeat;
    background-size: cover;
  }
}
@media screen and (min-width: 1440px) {
  .payments .content-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .payments .content-container .text-content {
    width: 360px;
  }
  .payments .content-container .image-gallery {
    width: 790px;
    margin-top: 0px;
  }
  .payments .content-container .image-gallery .image.bag {
    background: url(../img/baggage-desktop.jpg) no-repeat;
    background-size: cover;
  }
  .payments .content-container .image-gallery .image.passport {
    background: url(../img/passport-desktop.jpg) no-repeat;
    background-size: cover;
  }
  .payments .content-container .image-gallery .image.bridge {
    background: url(../img/bridge-desktop.jpg) no-repeat;
    background-size: cover;
  }
}

segue abaixo o endereço do meu repositório no github, caso necessite analisar outras partes do meu código.

https://github.com/ervcit-hub/jornada-viagens

2 respostas
solução!
por Lorena Garcia
| 15627.3k xp | 23509 posts
Instrutor

Olá, Esperidião! Como vai?

Obrigada por compartilhar seu codereview da payment section.

Legal que você explorou o CSS Grid pra organizar a galeria de imagens com CSS, utilizou muito bem o Flexbox pra alternar a direção do container entre coluna e linha conforme a largura da tela e ainda compreendeu a importância das media queries pra entregar versões diferentes das imagens em cada breakpoint.

Se quiser aprofundar ainda mais, algumas boas práticas são:

  • Unidades flexíveis: trocar height: 460px por min-height ou aspect-ratio deixa a galeria mais adaptável a telas intermediárias.
  • Variáveis CSS: guardar medidas repetidas como gap e larguras em custom properties facilita ajustes futuros em um só lugar.

Ah, uma pergunta: O que você achou mais desafiador nessa seção: montar a estrutura da galeria com Grid ou organizar a troca das imagens de fundo em cada breakpoint?

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
por Esperidião Ribbeiro Vaz Curvo
| 20.9k xp | 29 posts

Para mim o mais difícil foi montar a estrutura da galeria com Grid porque ainda estou me familiarizando com o CSS Grid, embora na aula tenham fixado a altura e eu segui os passos da professora; estou vendo que há 1001 formas de configurar o CSS grid.

eu particularmente estou querendo aprender a diferença entre as abordagens com grid-columns e grid-template-columns, assim como me familiarizar mais com o grid-area

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