CSS: gallerie di immagini con display:grid

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