1
resposta

Criando o layout com Grid

Olá pessoal!

Resolvi replicar o card do projeto, porém o fiz utilizando o Grid no lugar do Flex e obtive um resultado um pouco diferente do que vimos em aula e com isso gostaria de saber o que posso mudar no meu código para obter maior proximidade com o modelo mesmo usando grid.

Como ficou: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Meu código:

.card {
    background: var(--branco);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 1em;
    padding: 1em;
}

.card__descricao {
   display:grid;
   grid-template-columns: 1fr 1fr;  
   grid-column-gap:1.5em;
   padding: 0 1.2em;
   margin-bottom: 0.5em;
}

.card__botoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5em;
    padding: 0 1.2em;
}

.botoes {
    display: grid;
    grid-template-columns: 1fr 1fr; 
}

.descricao__titulo {
    color: var(--laranja);
    font-weight: 700;
}

.descricao__titulo-livro {
    color: var(--azul);
    font-size: 18px;
    font-weight: 600;
    margin: 0.5em 0;
}

.descricao__texto {
    font-size: 14px;
}

.botoes__ancora {

    background-color: var(--laranja);
    padding: 1em;
    color: var(--branco);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}
1 resposta

Oi, tudo bem?

Uma sugestão seria ajustar o tamanho das colunas do grid para ficarem mais próximas do modelo que você está replicando. Além disso, você pode experimentar outras propriedades do Grid, como grid-template-rows e grid-row-gap, para ajustar o espaçamento entre as linhas do card.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!