Como criar exibição em grade / lado a lado?

129

Por exemplo, tenho alguma classe .article e quero visualizá-la como exibição em grade. Então eu apliquei este estilo:

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

Esse estilo fará com que o artigo pareça lado a lado / grade. É um bom trabalho com altura fixa. Mas se eu quiser definir a altura como automática (esticar automaticamente de acordo com os dados contidos nela), a grade parecerá desagradável.

insira a descrição da imagem aqui

E eu quero fazer a visualização assim:

insira a descrição da imagem aqui

— Ariona Rian
fonte

78

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

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

Como alternativa, você pode usar CSS3 columns. Mas, por enquanto, o plug-in baseado em jQuery é a melhor opção, pois há um problema de compatibilidade com a coluna CSS3.

— estante de livros
fonte

3

Adicionado o caminho CSS3 aqui para ficar!

— precisa saber é o seguinte

27

Você pode usar o flexbox.

Coloque seus elementos em um contêiner flexível de coluna multilinha

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

Reordene os elementos, para que a ordem do 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 */

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. Mas funciona no Firefox.

Mostrar snippet de código

#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; }

<div id="flex-container">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div>
</div>

Expandir snippet

— Oriol
fonte

Uau, essa era uma pergunta antiga. E usar o flexbox para simular o layout da alvenaria não é a melhor opção. Seu snippet não está funcionando a propósito: D, acho que você perdeu o ponto aqui. A outra solução alternativa para resolver esse problema é usar colunas CSS3. mas, obrigado pela resposta

— Ariona Rian

1

@ArionaRian Experimente o trecho no Firefox, outros navegadores ainda não suportam quebras de linha forçadas. E sim, as colunas CSS também podem funcionar, mas diferentemente do flexbox, que parece mais projetado para texto do que para layout.

— Oriol 30/01

Sim, esse é o problema :), É por isso que até agora, ainda estamos atentos ao plugin de alvenaria / isótopo para definir esse tipo de design.

— Ariona Rian

Basta colocar display: flex; flex-wrap: wrap; (e nada mais) no contêiner e funciona perfeitamente no Chrome, Firefox, Safari, IE11 no Win11 e Win7. Porém, tenha cuidado com a altura mínima (consulte caniuse.com/#search=flex-wrap ) #

— LBJ

@LBJ Mas então os elementos são organizados em linhas. Isso não é o comportamento desejado aqui

— Oriol

11

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

Para a criação de alvenaria layout usando CSS3 o column-countjuntamente com column-gapbastaria. Mas eu também costumava media-queriestorná-lo responsivo.

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

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

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;
    }
}

<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">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 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

Expandir snippet

— behradkhodayar
fonte

Você sabe como ter espaço igual entre os itens da alvenaria e o contêiner?

— Intcreator

5

É bom, mas para muitas pessoas, é necessário PEDIR o masonry bricks. A coluna ordena as coisas de cima para baixo, a pergunta estava pedindo para que a ordem permanecesse na mesma horizontalmente, para não mudar verticalmente. Por exemplo, o menor bloco encontrado acima DEVE estar na terceira coluna, mas na linha superior.

— jscul

4

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

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

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

— Patricio Gabriel Maseda
fonte

3

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 obter mais detalhes, acesse o link a seguir: https://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
fonte

2

Com o CSS Grid Module, você pode criar um layout bastante semelhante .

Demonstração 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 altura grande abrangem 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;
}

Mostrar snippet de código

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;
}

<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

Expandir snippet

Codepen demo

Os problemas:

As lacunas entre os itens não serão uniformes
Você precisa definir manualmente os itens grandes / altos para abranger 2 ou mais linhas
Suporte limitado ao navegador :)

— Danield
fonte

1

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, usa a ajuda do Javascript mas é muito popular, então você encontrará muitos documentos

se você acha muito complicado, já 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

— user1978456
fonte

1

Há 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;
}

<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

Expandir snippet

baseado nesta caneta-código de Rachel Andrew FTW

— Vladimir Ishenko
fonte