Dreispaltige Bildergalerie, die sich automatisch der Breite des Browserfensters anpasst

HTML

<div class="galerie">
    <img src="p/unicode_0152.svg" alt="">
    <img src="p/unicode_00BE.svg" alt="">
    <img src="p/unicode_fb03.svg" alt="">
    <img src="p/unicode_00BC.svg" alt="">
    <img src="p/unicode_0040.svg" alt="">
    <img src="p/unicode_fb00.svg" alt="">
    <img src="p/unicode_221E.svg" alt="">
</div>

CSS

.galerie {
    /* das entscheidende */
    display: grid;

    /* Dreispaltiges Layout, jeweils ein Drittel */
    grid-template-columns: 1fr 1fr 1fr;

    /* Abstand zwischen den Raster-Elementen */
    grid-gap: 15px;
}

/* die Bilder sollen 100% der Rasterzelle einnehmen */
.galerie img {
    width: 100%;
    height: auto;
}

Demo

Bildergalerie-Demo – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit in Brackets experimentieren…

CodePen

See the Pen Bildergalerie_einfach by Matthias Edler-Golla (@megolla) on CodePen.