GridLayout

[ Schnittstelle ]

interface GridLayout {
    gridTemplateColumns?: string | null;
    gridTemplateRows?: string | null;
    gridAutoFlow?: 'Row' | 'Column' | null;
    columnGap?: number | null;
    columnGapUnit?: DimensionUnit | null;
    rowGap?: number | null;
    rowGapUnit?: DimensionUnit | null;
    justifyItems?: 'Left' | 'Center' | 'Right' | null;
    alignItems?: 'Start' | 'Center' | 'End' | null;
    overflowX?: 'Visible' | 'Hidden' | 'Scroll' | 'Auto' | null;
    overflowY?: 'Visible' | 'Hidden' | 'Scroll' | 'Auto' | null;
}

Eigenschaften

Name

Typ

Beschreibung

gridTemplateColumns

string, null, undefined

Definiert die Spalten des Grids, z. B. "120px max-content 1fr", und legt damit die Breite der einzelnen Spalten fest.

MDN: grid-template-columns

gridTemplateRows

string, null, undefined

Definiert die Zeilen des Grids, z. B. "120px max-content 1fr", und legt damit die Höhe der einzelnen Zeilen fest.

MDN: grid-template-rows

gridAutoFlow

'Row', 'Column', null, undefined

Bestimmt, ob automatisch platzierte Elemente zeilenweise oder spaltenweise im Grid angeordnet werden.

MDN: grid-auto-flow

columnGap

number, null, undefined

Legt den Abstand zwischen den Spalten fest.

MDN: column-gap

columnGapUnit

DimensionUnit, null, undefined

Gibt die Einheit an, in der der Abstand zwischen den Spalten angegeben wird, z. B. "px" oder "%".

rowGap

number, null, undefined

Legt den Abstand zwischen den Zeilen fest.

MDN: row-gap

rowGapUnit

DimensionUnit, null, undefined

Gibt die Einheit an, in der der Abstand zwischen den Zeilen angegeben wird, z. B. "px" oder "%".

justifyItems

'Left', 'Center', 'Right', null, undefined

Bestimmt die horizontale Ausrichtung der Elemente innerhalb ihrer jeweiligen Grid-Zellen.

MDN: justify-items

alignItems

'Start', 'Center', 'End', null, undefined

Bestimmt die vertikale Ausrichtung der Elemente innerhalb ihrer jeweiligen Grid-Zellen.

MDN: align-items

overflowX

'Visible', 'Hidden', 'Scroll', 'Auto', null, undefined

Legt fest, wie sich Inhalte bei horizontalem Überlauf verhalten, z. B. sichtbar bleiben, abgeschnitten werden oder scrollbar sind.

MDN: overflow-x

overflowY

'Visible', 'Hidden', 'Scroll', 'Auto', null, undefined

Legt fest, wie sich Inhalte bei vertikalem Überlauf verhalten, z. B. sichtbar bleiben, abgeschnitten werden oder scrollbar sind.

MDN: overflow-y

GridLayout 1:

Verfügbar ab Version 1.14.4.17