Emzett Digital

Grid und Responsive Design

CSS Grid ordnet Elemente in Zeilen und Spalten: display: grid; grid-template-columns: repeat(3, 1fr);. Mit repeat(auto-fit, minmax(220px, 1fr)) entsteht ein Raster, das sich selbst anpasst. Media Queries (@media (max-width: 600px) { ... }) ändern Regeln je nach Bildschirmbreite. Denke Mobile first: Zuerst das schmale Layout, dann erweitern.

Vergiss das viewport-Meta-Tag nicht, sonst skaliert die Seite am Handy falsch.

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.seitenleiste { display: none; }
@media (min-width: 800px) {
  .seitenleiste { display: block; }
}

Merke

grid-template-columns definiert Spalten
auto-fit + minmax für anpassbare Raster
Media Queries passen das Layout an die Breite an

Aufgabe

Baue eine Kartenübersicht mit 1 Spalte am Handy und 3 am Desktop.