Come dispongo le immagini su 3 colonne senza spazi verticali?

Disporre le immagini su 3 colonne evitando gli spazi verticali è una cosa che, per molti anni, è stata risolta tramite un codice JavaScript denominato Masonry. Qui risolviamo lo stesso problema con i CSS3.

Ho creato tre colonne in cui mostrare delle immagini. Riesco a mettere le immagini una di fianco all’altra, ma a causa delle diverse dimensioni delle immagini, mi resta un orribile spazio verticale tra le varie immagini. Cerco di spiegare con due immagini la mia situazione.
Questo è ciò che ottengo:
colonne_spazi_verticali
Mentre questo è ciò che vorrei ottenere:
colonne_no_spazi_verticali

Come posso fare?

La soluzione

Il problema da te posto è stato risolto per molti anni da uno script JavaScript denominato Masonry. Ancora oggi tale script è molto diffuso.
Tuttavia noi oggi, per disporre alcune immagini su 3 colonne, utilizzeremo i CSS3 e la proprietà columns.

Immaginiamo quindi di avere delle immagini all’interno di un div, come nel codice HTML che segue.

<div class="masonry-container">
   <img class="masonry-brick" src="https://i2.wp.com/www.innerheights.co.za/wp-content/uploads/2018/01/fullmoon-1.jpg"/>
   <img class="masonry-brick" src="http://images5.fanpop.com/image/photos/31700000/Beautiful-gifs-emmashields-31716647-450-313.jpg"/>
   <img class="masonry-brick" src="https://i2.wp.com/www.innerheights.co.za/wp-content/uploads/2018/01/fullmoon-1.jpg"/>
   <img class="masonry-brick" src="http://images5.fanpop.com/image/photos/31700000/Beautiful-gifs-emmashields-31716647-450-313.jpg"/>
   <img class="masonry-brick" src="http://images5.fanpop.com/image/photos/31700000/Beautiful-gifs-emmashields-31716647-450-313.jpg"/>
   <img class="masonry-brick" src="http://images5.fanpop.com/image/photos/31700000/Beautiful-gifs-emmashields-31716647-450-313.jpg"/>
   <img class="masonry-brick" src="http://images5.fanpop.com/image/photos/31700000/Beautiful-gifs-emmashields-31716647-450-313.jpg"/>
   <img class="masonry-brick" src="https://i2.wp.com/www.innerheights.co.za/wp-content/uploads/2018/01/fullmoon-1.jpg"/>
</div>

Utilizziamo ora il seguente codice CSS per ottenere quello da te desiderato:

.masonry-container {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-gap: 2px;
    background-color: yellow;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
}
.masonry-brick {
    padding: 0;
    margin-bottom: -2px;
    display: inline-block;
    width: 100%;
}

Abbiamo un div esterno che contiene tutte le immagini a cui abbiamo assegnato la classe .masonry-container.
La proprietà column-count: 2; comunica al browser che il contenuto del div deve essere disposto su 2 colonne (quindi, per adesso, non avremo immagini su 3 colonne, ma soltanto su 2 colonne). Le righe successive comunicano poi che lo spazio tra le colonne deve essere di 2px, che la larghezza massima del contenitore dovrà essere di 768px e che il suo colore di sfondo deve essere giallo (nella realtà è meglio rimuovere quest’ultima caratteristica).

In seguito assegniamo ad ogni immagine la classe .masonry-brick che trasforma le immagini da elementi di tipo block a elementi di tipo inline-block e ne gestisce il margine in basso.

Il risultato? Beh… lo possiamo vedere qui di seguito:

E se si volessero disporre le immagini su 3 colonne?
Non dovrebbe essere troppo complicato. Basta modificare il valore della proprietà column-count da 2 a 3.

L’articolo ti è stato utile?
Allora potrebbe esserlo anche per qualcun altro. Condividilo, è gratis! 😀

Hai letto questi articoli?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *