Der Platz im Browserfenster soll optimal ausgenutzt werden; solange die Bilder in der gewünschten Größe gezeigt werden, füllen diese den zur Verfügung stehenden Platz.

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 {
    display: grid;
    grid-gap: 15px;

    /*
        auto-fill: zur Verfügung stehender Platz soll automatisch aufgefüllt werden,
        dazu kann der Browser auch weitere "grid-columns" erzeugen

        minmax(200px, 1fr): mindestens 200px; maximal 1fr
     */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Demo 1

Alle Bilder gleichgroß – schaut Euch den Source-Code (HTML & CSS) an und verändert die Breite des Browserfensters!

Demo 2

Erstes Bild doppelt so groß – 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…