Heute zeige ich euch wie man eine coole responsive Bilder Galerie mit Grid machen kann – man könnte auch Bento Grid dazu sagen. Mit diesem Trick kann man in einem Grid Bilder / Elemente pflanzen mit verschiedenen grössen – das was gerade so 2025 total IN ist.

Video

HTML

<div class="grid">
        <img src="bilder/bildr1.jpg" class="bild-grid-kol-2  bild-grid-zeile-2">
        <img src="bilder/bildr2.jpg">
        <img src="bilder/bildr3.jpg">
        <img src="bilder/bildr4.jpg">
        <img src="bilder/bildr5.jpg">
</div>

CSS

.grid {
    --gap: 10px;
    --anz-kolonnen: 4;
    --zeile-hoehe: 300px;

    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--anz-kolonnen), 1fr);
    grid-auto-rows: var(--zeile-hoehe);

    gap: var(--gap)
}

.grid > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bild-grid-kol-2 {
    grid-column: span 2;
}

.bild-grid-zeile-2 {
    grid-row: span 2;
}

@media screen and (max-width: 1024px) {
    .grid {
        --anz-kolonnen: 2;
    --zeile-hoehe: 200px;
    }
}