Responsives Grid Layout
Ein flexibles Grid-Layout, das sich automatisch an verschiedene Bildschirmgrößen anpasst.
Demo
1
2
3
4
5
6
Code
HTML
CSS
JavaScript
<div class="responsive-grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
padding: 16px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border-radius: 4px;
text-align: center;
font-size: 18px;
}
Erklärung
Dieses Grid-Layout verwendet CSS Grid, um ein responsives Raster zu erstellen, das sich automatisch an die Bildschirmgröße anpasst.
Die Schlüsseleigenschaft ist grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
, die:
- So viele Spalten wie möglich erstellt (
auto-fill
) - Jede Spalte mindestens 150px breit macht
- Den verfügbaren Platz gleichmäßig auf alle Spalten verteilt (
1fr
)
Das Layout passt sich automatisch an, wenn sich die Fenstergröße ändert, ohne dass Media Queries erforderlich sind.
Verwendung
Dieses Grid-Layout eignet sich hervorragend für Bildergalerien, Produktlisten oder Kartensammlungen auf deiner Website.