Wie erstelle ich eine responsive Bilder Grid Galerie auch Bento Grid genannt? (HTML & CSS)
von Eric-Oliver Mächler | März 31, 2025 | Design |
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
1
2
3
4
5
6
7
| <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> |
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| .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;
}
} |
.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;
}
}
0 Kommentare