Layout de alvenaria somente CSS

Preciso implementar um layout de alvenaria bastante comum. No entanto, por várias razões, não quero usar JavaScript para fazer isso.

Parâmetros:

• Todos os elementos têm a mesma largura
• Os elementos têm uma altura que não pode ser calculada no lado do servidor (uma imagem mais várias quantidades de texto)
• Eu posso viver com um número fixo de colunas se precisar

existe uma solução trivial para isso que funciona em navegadores modernos, a column-countpropriedade.

O problema com essa solução é que os elementos são ordenados em colunas:

Embora eu precise que os elementos sejam ordenados em linhas, pelo menos aproximadamente:

Abordagens que tentei que não funcionam:

• Fazendo itens display: inline-block: desperdiça espaço vertical.
• Fazendo itens float: left: lol, não.

Agora eu poderia alterar a renderização no servidor e reordenar os itens que dividem o número de itens pelo número de colunas, mas isso é complicado, propenso a erros (com base em como os navegadores decidem dividir a lista de itens em colunas), então eu gostaria para evitá-lo, se possível.

Existe alguma mágica flexível do flexbox que torna isso possível?

Flexbox

Um layout de alvenaria dinâmico não é possível com o flexbox, pelo menos não de maneira limpa e eficiente.

Flexbox é um sistema de layout unidimensional. Isso significa que ele pode alinhar itens ao longo de linhas horizontais OU verticais. Um item flexível está confinado à sua linha ou coluna.

Um sistema de grade real é bidimensional, o que significa que ele pode alinhar itens ao longo de linhas horizontais e verticais. Os itens de conteúdo podem se estender por linhas e colunas simultaneamente, o que os itens flexíveis não podem.

É por isso que o flexbox tem uma capacidade limitada para construir grades. É também uma razão pela qual o W3C desenvolveu outra tecnologia CSS3, o Grid Layout .

row wrap

Em um contêiner flexível com flex-flow: row wrap, os itens flexíveis devem quebrar em novas linhas .

Isso significa que um item flexível não pode quebrar em outro item na mesma linha .

Observe acima como a div nº 3 se divide abaixo da div nº 1 , criando uma nova linha. Não pode quebrar abaixo da div # 2 .

Como resultado, quando os itens não são os mais altos da linha, o espaço em branco permanece, criando lacunas desagradáveis.

column wrap

Se você alternar para flex-flow: column wrap, um layout semelhante à grade é mais viável. No entanto, um contêiner na direção da coluna tem quatro problemas em potencial imediatamente:

1. Os itens flexíveis fluem verticalmente, não horizontalmente (como você precisa neste caso).
2. O contêiner se expande horizontalmente, não verticalmente (como o layout do Pinterest).
3. Requer que o contêiner tenha uma altura fixa, para que os itens saibam onde embrulhar.
4. No momento da redação deste documento, ele possui uma deficiência em todos os principais navegadores, onde o contêiner não se expande para acomodar colunas adicionais .

Como resultado, um contêiner na direção da coluna não é uma opção nesse caso e em muitos outros casos.

Grade CSS com dimensões de item indefinidas

O layout da grade seria uma solução perfeita para o seu problema se as várias alturas dos itens de conteúdo pudessem ser pré-determinadas . Todos os outros requisitos estão dentro da capacidade da Grid.

A largura e a altura dos itens da grade devem ser conhecidas para fechar as lacunas nos itens ao redor.

Portanto, o Grid, que é o melhor CSS para oferecer para a construção de um layout de alvenaria com fluxo horizontal, fica aquém neste caso.

De fato, até que uma tecnologia CSS chegue com a capacidade de fechar automaticamente as lacunas, o CSS em geral não tem solução. Algo assim provavelmente exigiria refletir o documento, então não tenho certeza de quão útil ou eficiente seria.

Você precisará de um script.

As soluções JavaScript tendem a usar posicionamento absoluto, o que remove os itens de conteúdo do fluxo de documentos para reorganizá-los sem falhas. Aqui estão dois exemplos:

• Desandro Masonry

  Alvenaria é uma biblioteca de layout de grade JavaScript. Ele funciona colocando os elementos na posição ideal com base no espaço vertical disponível, como um pedreiro que encaixa pedras em uma parede.

  ^{fonte: http://masonry.desandro.com/}

• Como criar um site que funcione como o Pinterest

  [Pinterest] é realmente um site legal, mas o que eu acho interessante é como essas placas são dispostas ... Portanto, o objetivo deste tutorial é recriar esse efeito de bloco responsivo por conta própria ...

  ^{fonte: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html}

Grade CSS com dimensões de item definidas

Para layouts em que a largura e a altura dos itens de conteúdo são conhecidas, aqui está um layout de alvenaria que flui horizontalmente em CSS puro:

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

Demonstração do jsFiddle

Como funciona

1. Estabeleça um contêiner de grade em nível de bloco. (inline-grid seria a outra opção)
2. A grid-auto-rowspropriedade define a altura das linhas geradas automaticamente. Nesta grade, cada linha tem 50 px de altura.
3. A grid-gappropriedade é uma abreviação para grid-column-gape grid-row-gap. Esta regra define um intervalo de 10 px entre os itens da grade. (Não se aplica à área entre itens e o contêiner.)

4. A grid-template-columnspropriedade define a largura das colunas definidas explicitamente.

   A repeatnotação define um padrão de colunas (ou linhas) repetidas.

   A auto-fillfunção diz à grade para alinhar o maior número possível de colunas (ou linhas) sem sobrecarregar o contêiner. (Isso pode criar um comportamento semelhante ao flexflex-wrap: wrap .)

   A minmax()função define um intervalo de tamanho mínimo e máximo para cada coluna (ou linha). No código acima, a largura de cada coluna será no mínimo 30% do contêiner e no máximo de qualquer espaço livre disponível.

   A frunidade representa uma fração do espaço livre no contêiner da grade. É comparável à flex-growpropriedade do flexbox .

5. Com grid-rowe spanestamos dizendo aos itens da grade quantas linhas eles devem se estender.

Suporte do navegador para CSS Grid

• Chrome - suporte completo a partir de 8 de março de 2017 (versão 57)
• Firefox - suporte completo a partir de 6 de março de 2017 (versão 52)
• Safari - suporte completo a partir de 26 de março de 2017 (versão 10.1)
• Edge - suporte completo a partir de 16 de outubro de 2017 (versão 16)
• IE11 - sem suporte para especificações atuais; suporta versão obsoleta

Aqui está a imagem completa: http://caniuse.com/#search=grid

Recurso de sobreposição de grade legal no Firefox

Nas ferramentas de desenvolvimento do Firefox, quando você inspeciona o contêiner de grade, há um pequeno ícone de grade na declaração CSS. Ao clicar, exibe um esboço da sua grade na página.

Mais detalhes aqui: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

Essa é uma técnica recentemente descoberta que envolve o flexbox: https://tobiasahlin.com/blog/masonry-with-css/ .

O artigo faz sentido para mim, mas eu não tentei usá-lo, então não sei se há alguma ressalva, além das mencionadas na resposta de Michael.

Aqui está uma amostra do artigo, fazendo uso da orderpropriedade, combinada com:nth-child .

Fragmento de pilha

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

 /* Just to print out numbers */
div.item::before {
  counter-increment: items;
  content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  border: 1px solid #ddd;
  margin: 0;
  content: "";
  padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }

<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>