0

Boa tarde

Estou num projeto pessoal e uma das minhas inspirações é o layout do Google Keep, onde as divs se alinham e se encaixam como se estivessem formando um vitral. Fiz alguns testes alinhando as divs para esquerda (float: left), mas as divs sempre respeitam a altura do final da maior div que já está na tela, e aí fica um espaço em branco em alguns lugares.

Alguém tem alguma ideia de como fazer esse tipo de alinhamento? Para uma ideia melhor do que eu estou falando, deem uma olhada nessa imagem: http://tiredopapel.org/wp-content/uploads/2015/06/Google_Keep_Web_Update-630x484.png

1 Resposta 1

1

fiz um exemplo no jsFddle pra vc entender o funcionamento, mas também vou colocar aqui:

Basicamente, você controla as colunas com as tags column-count e column-gap do CSS.

.geral{padding: 5px;height: 390px;}
.collum{   
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-webkit-column-fill: auto;
 -moz-column-count: 5;
-moz-column-gap: 5px;
-moz-column-fill: auto;
column-count: 5;
column-gap: 0px;
column-fill: auto;}

.quadrado{width: 100px; height: 150px; background: orange; margin-bottom: 10px; margin-left: 10px;    display: inline-block;
}
.um{height: 130px}
.dois{height: 180px}
.tres{height: 120px}
.quatro{height: 100px;}
<div class="geral">
  <div class="collum">
      <div class="quadrado"></div>
      <div class="quadrado um"></div>
      <div class="quadrado dois"></div>
      <div class="quadrado"></div>
      <div class="quadrado"></div>
      <div class="quadrado tres"></div>
      <div class="quadrado"></div>
      <div class="quadrado quatro"></div>
      <div class="quadrado"></div>
      <div class="quadrado"></div>
  </div>
</div>

2
  • Cara, entendi Fiz uns testes aqui e se aproximou muito do que eu quero, vou seguir por aí mesmo Obrigado David Damasceno 12/04/2016 às 16:11
  • Tranquilo cara, se estiver de acordo com o que vc queria, por favor marque a resposta como aceita. 12/04/2016 às 16:15

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 .