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:
Mentre questo è ciò che vorrei ottenere:
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! 😀