Div in un layout in stile griglia reattivo senza gap verticale

Ho una collezione di div s (carte). Ognuno avrà un titolo, una descrizione e un’immagine (tutti di varie lunghezze / dimensioni).

Voglio mostrare questi “piacevolmente” sullo schermo.

Con “bene” intendo che voglio che l’immagine sia una miniatura, centrata orizzontalmente dopo il titolo e la descrizione.

Ancora più importante, voglio che la carta (contenente div ) sia posizionata una dopo l’altra (orizzontalmente e poi verticalmente) e senza grandi spazi verticali.

Esempio:

carte layout

Sto usando le classi di colonne responsive di Bootstrap ( col-lg , col-md , col-sm ) e img-responsive . Il problema principale che sto colpendo sono le grandi lacune verticali.

Ecco un mio tentativo .

Qualche trucco CSS per ottenere un layout simile alla mia immagine sopra? (Solo con meno colonne su display più piccoli).

Il modo migliore per ottenere questo layout è usare la Massoneria

Passo dopo passo:

  1. si inizia aggiungendo questo:

      

    o usando CDN

        
  2. allora questo sarebbe il tuo markup HTML

     
    ...
    ...
    ...
    ...
  3. E questo CSS

     .grid-item { width: 200px; } .grid-item--width2 { width: 400px; } 
  4. Se si utilizza la libreria jQuery, è ansible utilizzarla come plug-in e inizializzarla in questo modo:

     $('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 200 }); 
  5. altrimenti puoi inizializzare con vanilla JS in questo modo:

     var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { // options itemSelector: '.grid-item', columnWidth: 200 }); // element argument can be a selector string // for an individual element var msnry = new Masonry( '.grid', { // options }); 

PS- Puoi anche inizializzare in HTML senza JS.

Per ulteriori istruzioni, vedi Inizia qui


Usando solo i CSS, puoi usare le colonne CSS o CSS Flexbox. ma perderà in compatibilità cross-browser con il plugin Masonry