Bildergalerie mit Highlight
Das erste Bild soll visuell hervorgehoben werden und wird deshalb doppelt so groß dargestellt…
Dafür „überspannt“ es zwei Raster-Säulen („grid-column“) und zwei Raster-Reihen („grid-row“).
HTML
<div class="galerie">
<img class="betont" 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-template-columns: repeat(3, 1fr);
grid-gap: 15px;
}
.galerie img {
width: 100%;
height: auto;
}
.betont {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
Demo
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…