¿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

Respuestas:

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.

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

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

  2. 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 */

  3. 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

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

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.