1. Home
  2. Articoli
  3. CSS

CSS: gallerie di immagini con display:grid

Le griglie CSS si sposano perfettamente con le gallerie di immagini.

CSS di Gabriele Romanato

Le griglie CSS si sposano perfettamente con le gallerie di immagini.

Partiamo da questa marcatura:


<section id="grid">
    <figure>
        <img src="assets/images/image-1.jpg" alt="">
    </figure>
    <figure>
        <img src="assets/images/image-2.jpg" alt="">
    </figure>
    <figure>
        <img src="assets/images/image-3.jpg" alt="">
    </figure>
    <figure>
        <img src="assets/images/image-4.jpg" alt="">
    </figure>
    <figure>
        <img src="assets/images/image-5.jpg" alt="">
    </figure>
    <figure>
        <img src="assets/images/image-6.jpg" alt="">
    </figure>
</section>

Quello che vogliamo ottenere è una griglia a tre colonne.


#grid {
    max-width: 1024px;
    display: grid;
    grid-template-columns: 33.333% 33.333% 33.333%;
}

#grid figure {
    margin: 0;
    padding: 0;
}

#grid img {
    display: block;
    max-width: 100%;
    height: auto;
}

Creiamo una griglia con display: grid e definiamo il numero di colonne e la loro larghezza con la proprietà grid-template-columns.

Demo

CSS: image grid

Commenti