GridLayout
[ Interface ]
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;
}Properties
Name | Type | Description |
|---|---|---|
gridTemplateColumns | Defines the columns of the grid, e.g. "120px max-content 1fr", and thus fixes the width of the individual columns. | |
gridTemplateRows | Defines the rows of the grid, e.g. "120px max-content 1fr", and thus fixes the height of the individual rows. MDN: grid-template-rows | |
gridAutoFlow | Determines whether automatically placed elements are arranged row by row or column by column in the grid. MDN: grid-auto-flow | |
columnGap | Sets the space between columns. MDN: column-gap | |
columnGapUnit | Specifies the unit in which the distance between the columns is specified, e.g. "px" or "%". | |
rowGap | Sets the space between rows. MDN: row-gap | |
rowGapUnit | Specifies the unit in which the spacing between the lines is specified, e.g. "px" or "%". | |
justifyItems | Determines the horizontal alignment of the elements within their respective grid cells. MDN: justify-items | |
alignItems | Determines the vertical alignment of the elements within their respective grid cells. MDN: align-items | |
overflowX | Defines how content behaves in the event of horizontal overflow, e.g. remains visible, is cut off or is scrollable. MDN: overflow-x | |
overflowY | Defines how content behaves in the event of vertical overflow, e.g. remains visible, is cut off or is scrollable. MDN: overflow-y |
 | Available since version 1.14.4.17 |