Come creare una vista griglia / affiancata?

129

Ad esempio, ho una classe .article e voglio vedere questa classe come vista a griglia. Quindi ho applicato questo stile:

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

Questo stile renderà il .article aspetto piastrellato / griglia. Funziona bene con altezza fissa. Ma se voglio impostare l'altezza su auto (allungare automaticamente in base ai dati al suo interno), la griglia sembra cattiva.

inserisci qui la descrizione dell'immagine

E voglio rendere la vista in questo modo:

inserisci qui la descrizione dell'immagine

— Ariona Rian
fonte

78

Questo tipo di layout è chiamato layout in muratura . La muratura è un altro layout di griglia ma riempie lo spazio bianco causato dalla differenza di altezza degli elementi.

jQuery Masonry è uno dei plugin jQuery per creare layout in muratura.

In alternativa, puoi usare CSS3 column. Ma per ora il plugin basato su jQuery è la scelta migliore poiché esiste un problema di compatibilità con la colonna CSS3.

— bookcasey
fonte

3

Aggiunto il modo CSS3 qui per rimanere!

— Behradkhodayar,

27

Puoi usare flexbox.

Posiziona i tuoi elementi in un contenitore flessibile a colonne multilinea
```
#flex-container {
  display: flex;
  flex-flow: column wrap;
}
```

Riordinare gli elementi, in modo che l'ordine DOM venga rispettato in senso orizzontale anziché verticale. Ad esempio, se vuoi 3 colonne,

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

Forza un'interruzione di colonna prima del primo elemento di ogni colonna:
```
#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}
```
Purtroppo, non tutti i browser supportano ancora le interruzioni di riga in flexbox. Funziona su Firefox, però.

Mostra snippet di codice

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

Espandi frammento

— Oriol
fonte

Caspita, questa era una vecchia domanda. E l'uso di flexbox per simulare il layout in muratura non è la migliore opzione. Il tuo frammento non funziona in questo modo: D, penso che ti sfugga il punto qui. L'altra soluzione alternativa per risolvere questo problema è utilizzando le colonne CSS3. ma, grazie per la risposta

— Ariona Rian il

1

@ArionaRian Prova lo snippet su Firefox, altri browser non supportano ancora le interruzioni di riga forzate. E sì, anche le colonne CSS potrebbero funzionare, ma a differenza della flexbox che sembra più progettata per il testo che per il layout.

— Oriol

Sì, questo è il problema :), ecco perché fino ad ora, siamo ancora fedeli al plug-in in muratura / isotopo per definire questo tipo di design.

— Ariona Rian,

Basta mettere display: flex; avvolgimento flessibile: avvolgimento; (e nient'altro) sul contenitore, e funziona perfettamente in Chrome, Firefox, Safari, IE11 su Win11 e Win7. Fai attenzione all'altezza minima, però (vedi caniuse.com/#search=flex-wrap )

— LBJ

@LBJ Ma poi gli elementi sono disposti in file. Questo non è il comportamento desiderato qui

— Oriol

11

Ora che CSS3 è ampiamente disponibile e compatibile con i principali browser, è tempo di una soluzione pura dotata dello strumento snippet di SO:

Per la creazione di layout in muratura utilizzando CSS3 è sufficiente il metodo column-countinsieme column-gap. Ma l'ho anche usato media-queriesper renderlo reattivo.

Prima di immergerti nell'implementazione, tieni presente che sarebbe molto più sicuro aggiungere un fallback della libreria di jQuery Masonry per rendere il tuo codice compatibile per il browser legacy, in particolare IE8-:

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

Eccoci qui:

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

Espandi frammento

— behradkhodayar
fonte

Sai come avere lo stesso spazio tra gli oggetti in muratura e il contenitore?

— Intcreatore,

5

È buono ma per molte persone, è necessario ORDINARE masonry bricks. La colonna ordina le cose dall'alto verso il basso, la domanda era che l'ordine rimanesse lo stesso in orizzontale, non in verticale. Ad esempio, il blocco più corto trovato sopra DOVREBBE essere nella terza colonna ma nella riga superiore.

— jscul,

4

L'opzione migliore per risolverlo con solo css è usare la proprietà conteggio colonne css.

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

Controlla questo per maggiori informazioni: https://developer.mozilla.org/en/docs/Web/CSS/column-count

— Patricio Gabriel Maseda
fonte

3

Puoi usare display: grid

per esempio:

Questa è una griglia con 7 colonne e le tue righe hanno dimensioni automatiche.

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

Per maggiori dettagli accedi al seguente link: https://css-tricks.com/snippets/css/complete-guide-grid/

— vrbsm
fonte

2

Con il modulo griglia CSS puoi creare un layout abbastanza simile .

Demo CodePen

1) Impostare tre colonne della griglia a larghezza fissa

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

2) Accertarsi che gli articoli con altezza elevata si estendano su 2 file

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

Mostra snippet di codice

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>

Espandi frammento

Demo Codepen

I problemi:

Gli spazi tra gli oggetti non saranno uniformi
Devi impostare manualmente gli elementi grandi / alti su 2 o più righe
Supporto per browser limitato :)

— danielD
fonte

1

e se vuoi andare oltre la muratura, usa l'isotopo http://isotope.metafizzy.co/ è la versione avanzata della muratura (sviluppata dallo stesso autore) non è puro CSS, usa l'aiuto di Javascript ma è molto popolare, quindi troverai molti documenti

se lo trovi molto complicato, allora ci sono molti plugin premium che hanno già basato il loro sviluppo su isotopo, ad esempio i Media Box http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

— user1978456
fonte

1

C'è un esempio basato sulla griglia .

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

Espandi frammento

basato su questa penna di codice di Rachel Andrew FTW

— Vladimir Ishenko
fonte