CSS Grid (Das Schachbrett-Muster für Layouts)

💡 Die Kernidee im Alltag:

"Während Flexbox für eine einzige Reihe gedacht ist, ist CSS Grid ein 2D-Schachbrett: Zeilen und Spalten gleichzeitig."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Ein responsives Kartengitter mit nur 2 Zeilen Code:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 gleich große Spalten */
  gap: 20px;
}

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Cursor / Claude

Golden Prompt für deinen Editor:

Schreibe eine CSS-Grid-Regel mit repeat(auto-fit, minmax(250px, 1fr)), die sich ohne Media Queries automatisch auf Smartphones und Desktops anpasst.

Qualitäts-Prüfung: Achte darauf, dass `auto-fit` oder `auto-fill` zusammen mit `minmax()` verwendet wird.

Erstelle ein 2-Spalten-Raster mit `display: grid;` und `grid-template-columns: 1fr 1fr;`.