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.