0

Amigos alguém sabe se tem como colocar um valor de gap diferente pra cada linha do grid? Tipo no caso abaixo colocar grid-row-gap: 0px entre a primeira e a segunda linha e depois colocar 10px entre as outras linhas

link pro codepen

html, body {
  height: 100%;
}
.grid {
    display: grid;
    height: 100%;
    width: 100%;

    grid-template-areas: "title title"
                         "score board"
                         "score board"
                         "stats ctrls";

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-row-gap: 10px;
}

#title    { grid-area: title;
            background-color: purple; }

#score    {
    grid-area: score;
    background-color: yellow;

}
#stats    { grid-area: stats; background-color: red;}
#board    { grid-area: board; background-color: blue;}
#controls { grid-area: ctrls; background-color: green;}

<div class="grid">
  <div id="title">title</div>       
  <div id="score">score</div>
  <div id="board">board</div>
  <div id="stats">stats</div>
  <div id="controls">controls</div>
</div>
2

1 Resposta 1

0

Não vejo a possibilidade de alterar o grid individualmente dentro de uma coleção de divs dentro de uma div-mãe. A solução que sugiro é forçar que a primeira div vá 10px para baixo e subir a div-mãe 10px pra cima. Porém isso irá gerar um espaçamento de 20px na parte de baixo da div-mãe:

No bloco .grid, adicione:

top: -10px; position: relative;

No bloco #title adicione:

top: 10px; position: relative;
1
  • Funciona, mas será que existe um jeito de definir o tamanho do gap individualmente parecido como tem pra definir o tam das linhas/colunas?
    – Big LaoBan
    Commented 29/08/2017 às 2:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .