Search code examples
htmlcssfrontendcss-gridweb-frontend

How do I fill this empty space in a grid? Should I not use grid?

This is how it looks:

enter image description here

I want the small image (yellow icon) to be right next to the title. Not necessarily inline, but with a small space between them. Is there a way to fix this grid so there won't be a big space between the image and the title? I'm open to doing this without grid if needed. Also I'd like for it to be responsive.

I've tried adding grid-template-columns: 5vw; and it made the entire grid leaner, and got the title slightly closer to the image. I couldn't get it to look good in any size.

Code:

HTML

<div class="recurso">
           <img src="../assets/images/cp/cidade-transp.png" alt="cidade" class="imagem-recurso">
           <img src="../assets/images/cp/slide.png" alt="icone-slide" class="icone-recurso">
           <div class="titulo-recurso">E se for um título mais longo, como será que fica?</div>
           <div class="texto-recurso">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
           <button class="botao1-recurso"><b>DOWNLOAD LIVRO EM PDF</b></button>
        <br><br><br>
        </div>

CSS

.recurso {
    display: grid;
    gap: calc(10px + 3vw);
    grid-template-areas: 
    'capa capa capa icone titulo titulo titulo'
    'capa capa capa texto texto texto texto'
    'capa capa capa botao botao botao botao';

    margin-left: 10vw;
    margin-right: 10vw;
    align-items: center;
    justify-content: center;
    /*grid-auto-columns: 5vw;*/
}

.imagem-recurso {
    grid-area: capa;
    max-width: 25vw;
    max-height: 40vw;
    margin-top: 0%;
}

.icone-recurso {
    grid-area: icone;
    display: inline-block;
    max-width: 5vw;
    max-height: 5vw;
}

.titulo-recurso {
    grid-area: titulo;
    font-family: Martel;
    font-size: calc(15px + 0.5vw);
    color: white;
}

.texto-recurso {
    grid-area: texto;
    font-family: Martel;
    font-size: calc(10px + 0.3vw);
    color: white;    
}

.botao1-recurso {
  grid-area: botao;
  font-family: Martel;
  background-color: #ffc700;
  border: none;
  color: #292929;
  padding: calc(5px + 0.2vw) calc(5px + 0.2vw);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  cursor: pointer;
  max-width: calc(20px+5vw);
}

Also if there's a way to make the button smaller, with empty space by the right side, please let me know! Thank you!

Solution

  • Add grid-template-columns property to your .recurso class. and adjust the column width.

    E.g.

    .recurso {
    grid-template-columns: 2fr 2fr 2fr 1fr 2fr 2fr 2fr 
}

    Here all columns are 2 fractions wide while your icon columns is 1 fraction (half of the other) wide only. You might need to adjust this but that will make the icon column narrow compare to others and it will move your icon near to your title