📐 1. Die 2D-Matrix: Spalten, Zeilen & fr-Units
Mit display: grid definierst du Spalten (Columns) und Zeilen (Rows) gleichzeitig. Die Einheit fr (Fractional Unit) teilt den freien Platz intelligent auf:
Header (grid-column: span 3)
Sidebar (1fr)
Main Content (span 2)
Footer (grid-column: span 3)
.grid-layout {
display: grid;
grid-template-columns: 240px 1fr; /* Sidebar fest, Main flexibel */
grid-template-rows: 60px 1fr 50px;
gap: 16px;
}✨ 2. Responsive Grids ohne Media Queries
Mit der Kombination aus repeat(), auto-fit und minmax() baut sich dein Layout vollautomatisch für Mobilgeräte, Tablets und Widescreens um:
.responsive-cards {
display: grid;
/* Mindestens 250px breit, dehnt sich bis 1fr aus: */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}♟️ Didaktische Analogie: Das modulare Schachbrett
Flexbox ist wie eine Kette von Dominosteinen in einer Reihe. CSS Grid ist ein Schachbrett mit Zeilen und Spalten: Du kannst Figuren exakt auf Planquadrate setzen oder Türme über mehrere Felder spannen lassen.
🗺️ 3. Benannte Bereiche: `grid-template-areas`
Skizziere komplexe App-Dashboards direkt im CSS-Code:
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 20px;
}
.dash-header { grid-area: header; }
.dash-sidebar { grid-area: sidebar; }
.dash-main { grid-area: main; }
.dash-footer { grid-area: footer; }🧠 Diagnostischer Selbst-Check
Überprüfe dein Verständnis der Kernkonzepte und typischen Denkfallen, bevor du den Code in der Web-IDE schreibst.