Como criar uma visualização em grade / lado a lado?

Por exemplo, eu tenho um pouco de class .article, e quero ver essa class como exibição de grade. Então eu apliquei esse estilo:

.article{ width:100px; height:100px; background:#333; float:left; margin:5px; } 

Esse estilo fará com que o artigo pareça azulejo / grade. Funciona bem com altura fixa. Mas se eu quiser definir a altura como automática (alongar automaticamente de acordo com os dados dentro dela), a grade parecerá desagradável.

insira a descrição da imagem aqui

E eu quero fazer a visão assim:

insira a descrição da imagem aqui

Esse tipo de layout é chamado de layout de alvenaria . A Maçonaria é outro layout de grade, mas preencherá o espaço em branco causado pela diferença de altura dos elementos.

jQuery Masonry é um dos plugins do jQuery para criar layout de alvenaria.

Como alternativa, você pode usar column CSS3. Mas, por enquanto, o plugin baseado em jQuery é a melhor escolha, pois há um problema de compatibilidade com a coluna CSS3.

Você pode usar o flexbox.

  1. Coloque seus elementos em um contêiner flexível de coluna de várias linhas

     #flex-container { display: flex; flex-flow: column wrap; } 
  2. Reordene os elementos, para que a ordem DOM seja respeitada horizontalmente em vez de verticalmente. Por exemplo, se você quiser 3 colunas,

     #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */ #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */ #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */ 
  3. Forçar uma quebra de coluna antes do primeiro item de cada coluna:

     #flex-container > :nth-child(-n + 3) { page-break-before: always; /* CSS 2.1 syntax */ break-before: always; /* New syntax */ } 

    Infelizmente, nem todos os navegadores suportam quebras de linha no flexbox ainda. Funciona no Firefox, no entanto.

 #flex-container { display: flex; flex-flow: column wrap; } #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */ #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */ #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */ #flex-container > :nth-child(-n + 3) { page-break-before: always; /* CSS 2.1 syntax */ break-before: always; /* New syntax */ } /* The following is optional */ #flex-container > div { background: #666; color: #fff; margin: 3px; display: flex; justify-content: center; align-items: center; font-size: 36px; } #flex-container > :nth-child(1) { height: 100px; } #flex-container > :nth-child(2) { height: 50px; } #flex-container > :nth-child(3) { height: 75px; } #flex-container > :nth-child(4) { height: 50px; } #flex-container > :nth-child(5) { height: 100px; } #flex-container > :nth-child(6) { height: 50px; } #flex-container > :nth-child(7) { height: 100px; } #flex-container > :nth-child(8) { height: 75px; } #flex-container > :nth-child(9) { height: 125px; } 
 
1
2
3
4
5
6
7
8
9

Agora que o CSS3 está amplamente disponível e é compatível com os principais navegadores, é hora de uma solução pura equipada com a ferramenta de snippets do SO:


Para criar um layout de alvenaria usando CSS3, a column-count column-gap junto com o column-gap seria suficiente. Mas também usei media-queries para torná-lo responsivo.

Antes de mergulhar na implementação, considere que seria muito mais seguro adicionar um fallback da biblioteca de alvenaria da jQuery para tornar seu código compatível com o navegador legado, especialmente o IE8-:

  

Aqui vamos nós:

 .masonry-brick { color: #FFF; background-color: #FF00D8; display: inline-block; padding: 5px; width: 100%; margin: 1em 0; /* for separating masonry-bricks vertically*/ } @media only screen and (min-width: 480px) { .masonry-container { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media only screen and (min-width: 768px) { .masonry-container { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media only screen and (min-width: 960px) { .masonry-container { -moz-column-count: 5; -webkit-column-count: 5; column-count: 5; } } 
 
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3
Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3

A melhor opção para resolver isso apenas com o css é usando a propriedade css column-count.

  .content-box { border: 10px solid #000000; column-count: 3; } 

Verifique isso para mais informações: https://developer.mozilla.org/en/docs/Web/CSS/column-count

e se você quiser ir além da alvenaria, use o isótopo http://isotope.metafizzy.co/ é a versão avançada da alvenaria (desenvolvida pelo mesmo autor) não é CSS puro, ele usa a ajuda do Javascript mas é muito popular, então você encontrará muitos documentos

se você achar isso muito complicado, então existem muitos plugins premium que já basearam seu desenvolvimento no isótopo, por exemplo, o Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Você pode usar display: grid

por exemplo:

Esta é uma grade com 7 colunas e suas linhas têm tamanho automático.

 .myGrid{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-rows: auto; grid-gap: 10px; justify-items: center; } 

Para mais detalhes acesse o seguinte link: https://css-tricks.com/snippets/css/complete-guide-grid/

Com o CSS Grid Module, você pode criar um layout bem parecido .

Demo CodePen

1) Defina três colunas de grade de largura fixa

 ul { display: grid; grid-template-columns: 150px 150px 150px; ... } 

2) Verifique se os itens com grande altura span 2 linhas

 li:nth-child(1), li:nth-child(3), li:nth-child(5), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(12) { grid-row: span 2; } 
 body { margin: 0; } ul { display: grid; grid-template-columns: 150px 150px 150px; grid-gap: 1rem; justify-content: center; align-items: center; /* boring properties: */ list-style: none; width: 90vw; height: 85vh; margin: 4vh auto; border: 5px solid green; padding: 1rem; overflow: auto; counter-reset: item; } li { position: relative; } li:after { content: counter(item); counter-increment: item; position: absolute; padding: 0.3rem; background: salmon; color: white; left:0; top:0; } img { outline: 5px solid salmon; } li:nth-child(1), li:nth-child(3), li:nth-child(5), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(12) { grid-row: span 2; } 
 

Existe um exemplo baseado em grade .

 .grid-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); grid-auto-flow: dense; padding: 10px; } .grid-layout .item { padding: 15px; color: #fff; background-color: #444; } .span-2 { grid-column-end: span 2; grid-row-end: span 2; } .span-3 { grid-column-end: span 3; grid-row-end: span 4; } 
 
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content