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

129

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

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

Ese estilo hará que el artículo se vea en 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.

ingrese la descripción de la imagen aquí

Y quiero hacer la vista así:

ingrese la descripción de la imagen aquí

css grid positioning css-float tiles Ariona Rian
fuente

78

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 complementos de jQuery para crear diseños de mampostería.

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

bookcasey
fuente

3

¡Se agregó el CSS3-way aquí para quedarse!

behradkhodayar

27

Puedes usar flexbox.

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

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

Reordena 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 */

Forzar 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, todavía no todos los navegadores admiten saltos de línea en flexbox. Sin embargo, funciona en Firefox.

Mostrar fragmento 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 fragmento

Oriol
fuente

Wow, esta era una vieja pregunta. Y usar flexbox para simular el diseño de mampostería no es la mejor opción. Su fragmento no funciona por cierto: D, creo que se pierde el punto aquí. La otra solución para resolver este problema es mediante el uso de columnas CSS3. pero, gracias por la respuesta

Ariona Rian

1

@ArionaRian Pruebe el fragmento en Firefox, otros navegadores aún no admiten saltos de línea forzados. Y sí, las columnas CSS también podrían funcionar, pero a diferencia de Flexbox, parece más diseñado para el texto que para el diseño.

Oriol

Sí, ese es el problema :), es por eso que hasta ahora, todavía estamos apegados al complemento de mampostería / isótopo para diseñar este tipo de diseño.

Ariona Rian

Simplemente ponga display: flex; flex-wrap: envoltura; (y nada más) en el contenedor, y funciona perfectamente en Chrome, Firefox, Safari, IE11 en Win11 y Win7. Sin embargo, tenga cuidado con la altura mínima (consulte caniuse.com/#search=flex-wrap )

LBJ

@LBJ Pero luego los elementos se organizan en filas. Ese no es el comportamiento deseado aquí

Oriol

11

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 fragmentos de SO:

Para la creación de mampostería de diseño utilizando CSS3 el column-countjunto con column-gapsería suficiente. Pero también solía media-querieshacerlo receptivo.

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

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

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

<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 fragmento

behradkhodayar
fuente

¿Sabes cómo tener el mismo espacio entre los elementos de la mampostería y el contenedor?

intcreator

55

Es bueno, pero para mucha gente, es necesario ORDENAR masonry bricks. La columna ordena las cosas de arriba a abajo, la pregunta era pedir que la orden permaneciera igual horizontalmente, no que cambiara verticalmente. Por ejemplo, el bloque más corto que se encuentra arriba DEBE estar en la tercera columna, pero en la fila superior.

jscul

4

La mejor opción para resolver eso con solo css es usar la propiedad de conteo de columnas css.

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

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

Patricio Gabriel Maseda
fuente

3

Puedes 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 más detalles acceda al siguiente enlace: https://css-tricks.com/snippets/css/complete-guide-grid/

vrbsm
fuente

2

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

Mostrar fragmento 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 fragmento

Codepen demo

Los problemas:

Los espacios entre los artículos no serán uniformes.
Debe configurar manualmente los elementos grandes / altos para abarcar 2 o más filas
Soporte limitado del navegador :)

Danield
fuente

1

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

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

usuario1978456
fuente

1

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

<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 fragmento

basado en este código-pluma de Rachel Andrew FTW

Vladimir Ishenko
fuente

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

Respuestas:

Codepen demo

Los problemas: