1

Bom dia amigos. Estou com o seguinte problema: preciso fazer os elementos flutuarem com CSS Grid sem ter uma row especifica definida. Por exemplo, na imagem a seguir, não deveria existir aquele espaço cinza, o elemento logo abaixo deveria vir para cima para cobrir este espaço, como se fosse algo fluido, tipo um masonry.js.

Na div que cerca os elementos possuo o seguinte código:

display: grid; grid-template-columns: repeat(auto-fill, 50% ); grid-auto-rows: minmax(120px, auto);

E os elementos azuis eu somente organizei com:

grid-column: 1/2 ou grid-column: 2/2.

Disposição dos elementos

14
  • 1
    Cara editei a resposta e coloquei dois exemplos práticos, um com e outro sem o grid-auto-flow acho que vai ficar mais fácil de visualizar comu funciona, mas qq coisa me fala que te ajudo.
    – hugocsl
    24/07/2018 às 14:23
  • 1
    Cara Grid é muito novo e tb estou aprendendo um pouco rss. Estou fazendo uns testes aqui pq acho que quando eles tem o height definido da errado, só funciona se o conteúdo de dentro da div for grande. Mas seu eu ver algo edito a resposta e te falo
    – hugocsl
    24/07/2018 às 14:32
  • 1
    Cara inclui um exemplo no final da minha resposta que em vez do dense ele usa grid-auto-flow:row; nesse modelo deu certo, mas o dense tb pode ser muito útil! No youtube tem algum material sobre isso
    – hugocsl
    24/07/2018 às 14:43
  • 1
    Então eu tinha notado isso, por isso comentei ai encima e coloquei os outros exemplo no final da resposta. Mas edita a sua pergunta, e coloca o código html/css do grid que vc tem até o momento que posso te dar uma força. Tente substituir grid-auto-flow:row dense; pàra grid-auto-flow:row;` e veja o comportamento que vai apresentar.
    – hugocsl
    24/07/2018 às 15:04
  • 1
    Cara fiz uns testes e parece que esse é o comportamento padrão do Grid Layout. Quando o conteúdo é maior que a altura os outros elementos que está na row acompanham a altura do elemento mais alto. E o dense é o mais indicado para "encaixar" as peças do grid mesmo... e se vc diminuir o height na mão por exemplo ai o espaço vazio volta. O grid vc deve interferir o menos possível height e width, vc deve trabalhar na altura da row e largura das column de preferencia.
    – hugocsl
    24/07/2018 às 15:26

1 Resposta 1

3

Vc precisa ajustar a propriedade grid-auto-flow para row dense, assim todo elemento do Grid vai tentar se ajustar nos espaços em "vazios"

Aqui vc pode ler e ver alguns exemplos práticos do grid-auto-flow https://www.w3schools.com/cssref/pr_grid-auto-flow.asp

Segue um exemplo. Repare que o n4 deveria ficar após o n3, porém ele sobe pro espaço vazio que o n3 deixou, pois o n3 começa na segunda coluna e não na primeira.

Exemplo com a propriedade grid-auto-flow: row dense; aplicada:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.item3 { grid-column: 2 / 3; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50% );
 grid-auto-rows: minmax(120px, auto);
  grid-auto-flow: row dense;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding:20px 0;
  font-size: 30px;
}
    <p>O valor "dense" no grid-auto-flow faz o efeito que vc precisa </p>
    <div class="grid-container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
    </div>


Exemplo SEM a propriedade aplicada:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.item3 { grid-column: 2 / 3; }

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50% );
 grid-auto-rows: minmax(120px, auto);
  /* grid-auto-flow: row dense; */
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding:20px 0;
  font-size: 30px;
}
    <p>SEM no grid-auto-flow</p>
    <div class="grid-container">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
    </div>


Exemplo mais complexo com dense feito por Wes Bos

    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(10, 1fr);
      grid-auto-flow: dense;
    }
    .item:nth-child(6n) {
      background: cornflowerblue;
      grid-column: span 6;
    }
    .item:nth-child(8n) {
      background: tomato;
      grid-column: span 2;
    }
    .item:nth-child(9n) {
      grid-row: span 2;
    }
    .item18 {
      background: greenyellow !important;
      grid-column-end: -1 !important;
    }
    .item {
      background: silver;
    }
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
    <div class="item item11">11</div>
    <div class="item item12">12</div>
    <div class="item item13">13</div>
    <div class="item item14">14</div>
    <div class="item item15">15</div>
    <div class="item item16">16</div>
    <div class="item item17">17</div>
    <div class="item item18">18</div>
    <div class="item item19">19</div>
    <div class="item item20">20</div>
    <div class="item item21">21</div>
    <div class="item item22">22</div>
    <div class="item item23">23</div>
    <div class="item item24">24</div>
    <div class="item item25">25</div>
    <div class="item item26">26</div>
    <div class="item item27">27</div>
    <div class="item item28">28</div>
    <div class="item item29">29</div>
    <div class="item item30">30</div>
  </div>

Exemplo mais complexo, mas sem o dense ele usa grid-auto-flow:row;

.container {
  --gridgap:16px;
  --boxheight:100px;
  display:grid;
  grid-gap:var(--gridgap);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow:row;
  max-width:600px;
}

.box {
  outline:1px solid black;
  padding:8px;
  height:var(--boxheight);
}

.box.tall2  {
  height:calc(var(--boxheight)*2 + 2*var(--gridgap));
  grid-row-end:span 2
}

.box.tall3  {
  height:calc(var(--boxheight)* + 4*var(--gridgap));
  grid-row-end:span 3
}

.box.tall4  {
  height:calc(var(--boxheight)*4 + 6*var(--gridgap));
  grid-row-end:span 4
}
<section class='container'>
  <section class='box'>Box 1</section>
  <section class='box'>Box 2</section>
  <section class='box tall2'>Box 3</section>
  <section class='box tall3'>Box 4</section>
  <section class='box tall4'>Box 5</section>
  <section class='box'>Box 6</section>
  <section class='box'>Box 7</section>
  <section class='box'>Box 8</section>
  <section class='box'>Box 9</section>
  <section class='box'>Box 10</section>
  <section class='box'>Box 11</section>
  <section class='box'>Box 12</section>
</section>

Fonte: https://codepen.io/fch/pen/vmqBpa

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 .