Zusammenfassung

In dieser Lektion haben wir gelernt:

• CSS Grid ordnet Elemente gleichzeitig in Zeilen und Spalten an. Das Element mit display: grid ist der Grid-Container, und seine direkten Kinder sind die Grid-Items.
• Die Spalten legt man mit grid-template-columns fest: Jeder Wert erzeugt eine Spalte, zum Beispiel 200px 1fr. Zeilen entstehen bei Bedarf automatisch (oder werden mit grid-template-rows festgelegt).
• Die Einheit fr ist ein Anteil des freien Platzes: 1fr 1fr 1fr erzeugt drei gleiche Spalten, die sich der Breite des Containers anpassen.
• repeat(3, 1fr) ist eine kürzere Schreibweise für 1fr 1fr 1fr.
• gap legt den Abstand zwischen den Zeilen und den Spalten fest (nur zwischen den Zellen, nicht an den Rändern des Grids). Bei zwei Werten gilt der erste für die Zeilen und der zweite für die Spalten; row-gap und column-gap legen sie einzeln fest.
• Grid-Linien sind ab 1 nummeriert. Die Eigenschaften grid-column und grid-row sagen, welche Spalten und Zeilen ein Item belegt: span 2 belegt zwei davon, 1 / 3 alles zwischen den Linien 1 und 3 und 1 / -1 alle.
• grid-template-areas zeichnet ein Layout aus benannten Bereichen, eine Zeichenkette für jede Zeile, und grid-area setzt ein Element in einen Bereich.
• Flexbox ist für eine Richtung (eine Zeile oder eine Spalte), Grid für zwei (Zeilen und Spalten). Oft werden sie kombiniert: Grid für das Layout der Seite, Flexbox für die Teile darin.

In der nächsten Lektion wartet das Abschlussprojekt auf dich: Du gestaltest eine ganze Seite selbst und nutzt alles, was du im CSS-Kurs gelernt hast.