display:grid
Spaltendefinition | grid-template-columns | Spaltenbreiten durch Blanks getrennt oder Funktion – z.B. repeat(5,1fr) |
Zeilendefinition | grid-template-rows | Zeilenhöhen durch Blanks getrennt oder Funktion – z.B. repeat(5,1fr) |
Spalten/Zeilendefinition (kurz) | grid-template | Zeilendefinition(en) / Spaltendefinition(en) |
Grid Template | grid-template-areas | Definition Bezeichnung für eine Zelle, Beispiel (hd, mn, sb, ft werden später für grid-area verwendet):"hd hd hd hd hd hd hd hd hd" |
Grid Bereich festlegen | grid-area | Definition in welchen Bereich die aktuelle Klasse im Grid eingefügt wird (hd, mn, sb, ft im Beispiel) |
Spaltenabstand | column-gap | Größe |
Zeilenabstand | row-gap | Größe |
Spalten/Zeilanbstand | gap | Zeilenabstand Spaltenabstand oder nur einen Größe dann für Spalte/Zeile gleiche Abstand |
Positionierung/Spanning (kurz) | grid-column grid-row | Anfang / Ende (Bespiel: 2/4) Negative Werte: vom gegenüberliegenden Rand aus gesehen (oder Wrap nach links von der aktuellen Position weg) "span x" für row/colspan |
Positionierung/Spanning (lang) | grid-column|row-start grid-column|row-end | absolute Position negative Werte relativ von start/end oder rechten/unteren Rand "span x" für row/colspan |
Positionierung/Spanning (superkurz) | grid-area | row-start / col-start / row-end / col-end |
Inhaltspositionierung | place-content | align-content justify-content |
Reihenfolge ändern | order | Anzahl Positionen links (-) oder rechts |