¿Cómo crear una vista de cuadrícula / mosaico?

Por ejemplo, tengo una clase .article, y quiero ver esta clase como vista de cuadrícula. Así que apliqué este estilo:

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

Ese estilo hará que el artículo se vea mosaico / cuadrícula. Funciona bien con altura fija. Pero si quiero establecer la altura en automático (estirar automáticamente según los datos que contiene), la cuadrícula se ve desagradable.

enter image description here

Y quiero hacer la vista así:

enter image description here

Este tipo de diseño se llama diseño de mampostería . La mampostería es otro diseño de cuadrícula pero completará el espacio en blanco causado por la diferencia de altura de los elementos.

jQuery Masonry es uno de los plugins de jQuery para crear el diseño de mampostería.

Alternativamente, puede usar las column CSS3. Pero por ahora el complemento basado en jQuery es la mejor opción ya que existe un problema de compatibilidad con la columna CSS3.

Puedes usar flexbox.

  1. Coloque sus elementos en un contenedor flexible de columna multilínea

     #flex-container { display: flex; flex-flow: column wrap; } 
  2. Reordenar los elementos, de modo que el orden DOM se respete horizontalmente en lugar de verticalmente. Por ejemplo, si quieres 3 columnas,

     #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. Fuerce un salto de columna antes del primer elemento de cada columna:

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

    Lamentablemente, no todos los navegadores admiten saltos de línea en flexbox todavía. Sin embargo, funciona en Firefox.

 #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

Ahora que CSS3 está ampliamente disponible y es compatible a través de los principales navegadores, es hora de una solución pura equipada con la herramienta de fragmento SO.


Para crear el diseño de mampostería usando CSS3, el column-count column-gap junto con column-gap entre column-gap sería suficiente. Pero también he usado media-queries para hacerlo receptivo.

Antes de sumergirse en la implementación, considere que sería mucho más seguro agregar una reserva de la biblioteca de jQuery Masonry para hacer que su código sea compatible con el explorador heredado, especialmente IE8-:

  

Aquí vamos:

 .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

La mejor opción para resolver eso con solo css es usar la propiedad css column-count.

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

Mire esto para obtener más información: https://developer.mozilla.org/en/docs/Web/CSS/column-count

y si quiere ir más allá de la albañilería, use isotope http://isotope.metafizzy.co/ es la versión avanzada de mampostería (desarrollada por el mismo autor) no es CSS puro, utiliza la ayuda de Javascript pero es muy popular, por lo que encontrarás muchos documentos

si le resulta muy complicado, existen muchos complementos premium que ya basaron su desarrollo en isótopos, por ejemplo, los Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Puede usar display: grid

por ejemplo:

Esta es una cuadrícula con 7 columnas y sus filas tienen tamaño 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 obtener más detalles, utilice el siguiente enlace: https://css-tricks.com/snippets/css/complete-guide-grid/

Con el Módulo de cuadrícula CSS puede crear un diseño bastante similar .

Demo de CodePen

1) Establecer tres columnas de cuadrícula de ancho fijo

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

2) Asegúrese de que los artículos con una gran altura abarquen 2 filas

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

Hay un ejemplo basado en la cuadrícula .

 .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