1
resposta

Dúvida no grid

por Rodrigo Sena Pires
| 86.5k xp | 16 posts

Boa tarde, pessoal!

Estou treinando a disposição de seções com o display grid e estou com o seguinte problema, ao colocar uma linha ao lado da outra usando template-areas, acaba ficando um espaço indesejado, pois uma linha é mais alta que a outra.

Eu gostaria de saber como eu retiro esses espaços entre as linhas perfil e destaque e entre o destaque e o sobre.

Obrigado.

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>

    <header class="cabecalho">
        <p>cabecalho</p>
    </header>

    <main>

        <div class="perfil">
            <div class="capa"><p>Perfil</p></div>
            <div class="nome"></div>
        </div>
        <div class="destaques"><p>Destaques</p></div>
        <div class="sobre"><p>Sobre</p></div>
        <div class="experiencias"><p>Experiências</p></div>
        <div class="formacao"><p>Formação</p></div>
        <div class="idiomas"><p>Idiomas</p></div>
        <div class="lateral1"><p>Cartão lateral 1</p></div>
        <div class="lateral2"><p>Cartão lateral 2</p></div>
    </main>

    <br>


</body>

</html>
* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box
}

main {
  display: grid;        
  padding: 0 9.5rem;
  align-items: flex-start;
  justify-items: center;
  gap: 1rem;
  grid-template-areas:
  "header header"
  "perfil lateral1"
  "destaques lateral2"
  "sobre . "
  "experiencias . "
  "formacao . "
  "idiomas . ";
}

p {
  color: #1B2226;
  font-size: 2rem;
}

.cabecalho {
  width: 100%;
  height: 52px;
  grid-area: header;
  background-color: darkslateblue;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.perfil {
  grid-area: perfil;
}

.capa {
  width: 780px;
  height: 230px;
  background-color: aqua;
  border-radius: 4px;
}

.nome {
  width: 780px;
  height: 238px;
  background-color:brown;
  border-radius: 4px;
}

.destaques {
  width: 780px;
  height: 238px;
  background-color:blueviolet;
  border-radius: 4px;  
  grid-area: destaques;
}

.sobre {
  width: 780px;
  height: 134px;
  background-color: blue;
  border-radius: 4px;  
  grid-area: sobre;
}

.experiencias {
  width: 780px;
  height: 358px;
  background-color:burlywood;
  border-radius: 4px; 
  grid-area: experiencias;
}

.formacao {
  width: 780px;
  height: 127px;
  background-color:gold;
  border-radius: 4px;  
  grid-area: formacao;
}
.idiomas {
  width: 780px;
  height: 178px;
  background-color:chartreuse;
  border-radius: 4px; 
  grid-area: idiomas;
}

.lateral1 {
  width: 230px;
  height: 546px;
  background-color:crimson;
  border-radius: 4px;
  grid-area: lateral1;
}

.lateral2 {
  width: 230px;
  height: 551px;
  background-color:darkgreen;
  border-radius: 4px;
  margin-top: 1rem;
  grid-area: lateral2;
}

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

1 resposta
por RODRIGO SILVA HARDER
| 2164.5k xp | 4669 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Rodrigo, tudo bem?

Desculpe a demora em te responder!

Para remover os espaços entre os blocos de "perfil" e "destaque" e entre os blocos de "destaque" e "sobre", devemos realizar algumas modificações tanto no arquivo HTML quanto no arquivo CSS.

Vamos começar revisando o arquivo HTML:

  • Percebi que você utilizou tags <div>para cada um dos parágrafos, mas não há necessidade de utilizá-las nesse momento, pois dentro de cada uma das divisões criadas, há apenas um parágrafo, ou seja, podemos utilizar diretamente as tags <p>.

  • Em seguida criaremos uma divisão que vai englobar os cartões laterias 1 e 2 e daremos uma classe de lateral para esse container.

    Desse modo, o código será escrito assim:

    <body>

    <header class="cabecalho">
        <p>cabecalho</p>
    </header>

    <main>
      <div class="perfil">
          <p class="capa">Perfil</p>
          <p class="nome"></p>
      </div>
      <p class="destaques">Destaques</p>
      <p class="sobre">Sobre</p>
      <p class="experiencias">Experiências</p>
      <p class="formacao">Formação</p>
      <p class="idiomas">Idiomas</p>
      <div class="lateral">
          <p class="lateral1">Cartão lateral 1</p>
          <p class="lateral2">Cartão lateral 2</p>
      </div>
  </main>

</body>

Agora vamos para o arquivo CSS:

  • Inicialmente vamos reestruturar o grid-template-areas para alterar a estrutura lateral, responsável pelos espaçamentos excessivos que você quer remover. Colocaremos em cada uma das linhas, na segunda coluna a palavra lateral, com exceção da primeira linha onde manteremos header tanto na primeira quanto na segunda colunas, como mostrado abaixo:

    grid-template-areas:
  "header header"
  "perfil lateral"
  "destaques lateral"
  "sobre lateral "
  "experiencias lateral "
  "formacao lateral"
  "idiomas lateral ";

  • Na sequência iremos utilizar a classe lateralque criamos na divisão que engloba os dois cartões laterais e colcoaremos os seguintes comandos:

    .lateral{
    display:grid;
    grid-area: lateral;
    gap:1rem;
}

    Perceba que para os dois cartões laterais adicionamos o display grid para utilizar a propriedade gap e manter o mesmo espaçamento utilizado para os demais blocos na primeira coluna. Por fim adicionamos um grid-area:lateral para manter os blocos da primeira coluna alinhados corretamente sem espaçamentos indesejados.

  • Finalmente alteramos os códigos referentes às classeslateral1 e lateral2 de modo que removemos a propriedade grid-area que agora faz parte do container que engloba os dois cartões:

    .lateral1 {
  width: 230px;
  height: 546px;
  background-color:crimson;
  border-radius: 4px;
}

.lateral2 {
  width: 230px;
  height: 551px;
  background-color:darkgreen;
  border-radius: 4px;
}

Desse modo, conseguimos obter o seguinte resultado:

Gif mostrando blocos coloridos empilhados em duas colunas

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição.

Abraços!

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software