Edit this page
[?] Component size, gzipped: 26kb

FlexGrid

Many layouts we build today are well-suited for the grid CSS property, e.g. lining things up into rows or columns with specified gap sizes. Unfortunately, there is limited support in Internet Explorer today, so it is not recommended to use for certain sets of customer applications.

FlexGrid aims to provide a grid-like component for these customer applications, using flexbox to lay equal-width items in a row, and wrapping as needed to form a grid. It also supports specifying row or column gaps that only appear between items, and can adapt columns or gaps responsively to different screen widths.

Note: FlexGrid must contain FlexGridItem components as children in order to get the desired behavior with widths and margins. Also note that these are both implemented using Block, and can take all the Block properties for styling.

Examples

FlexGrid basic usage

FlexGrid unequal (narrow) widths

It is possible to achieve unequal-width items using Block style overrides.

FlexGrid unequal (wide) widths

Also, keep in mind that the margins won’t be set properly unless you have the correct number of items in each row. In this example, we add a hidden element after the wide element so that the last item in the first row has a margin-right of zero.

FlexGrid missing items

1
2
3
4
5
6
7
8
9
10
11

FlexGrid will add additional margin after the last element such that it always lines up with the row above, and avoids flexbox’s default nature of spreading out.

Responsive Layouts

FlexGrid, like Block, accepts props as either a single value or an array of values. See Block for more details.

FlexGrid responsive usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

API

FlexGrid API

flexGridColumnCount <T> | Array<<T>><number>

Number of equal-width columns to allow for

<T> | Array<<T>>number

flexGridColumnGap <T> | Array<<T>><union>

Grid gap between columns

<T> | Array<<T>>One of
0,
string

flexGridRowGap <T> | Array<<T>><union>

Grid gap between rows

<T> | Array<<T>>One of
0,
string

children import

react.Node

as import

Modifies the base element used to render the block.

react.ElementType

overrides object

Block { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

color <T> | Array<<T>><string>

Accepts all themeable color properties (primary200, etc.).

<T> | Array<<T>>string

backgroundAttachment <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

<T> | Array<<T>>string

backgroundClip <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

<T> | Array<<T>>string

backgroundColor <T> | Array<<T>><string>

Accepts all themeable color properties (primary200, etc.).

<T> | Array<<T>>string

backgroundImage <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

<T> | Array<<T>>string

backgroundOrigin <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

<T> | Array<<T>>string

backgroundPosition <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

<T> | Array<<T>>string

backgroundRepeat <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

<T> | Array<<T>>string

backgroundSize <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

<T> | Array<<T>>string

font union

Accepts all themeable font properties (font200, etc.).

One of
string,
Arraystring

alignContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"normal",
"baseline",
"first baseline",
"last baseline",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

<T> | Array<<T>>One of
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignSelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

<T> | Array<<T>>One of
"auto",
"normal",
"center",
"start",
"end",
"self-start",
"self-end",
"flex-start",
"flex-end",
"baseline",
"first baseline",
"last baseline",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

flexDirection <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

<T> | Array<<T>>One of
"row",
"row-reverse",
"column",
"column-reverse",
"inherit",
"initial",
"unset"

display <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/display

<T> | Array<<T>>One of
"block",
"inline",
"run-in",
"flow",
"flow-root",
"table",
"flex",
"grid",
"ruby",
"block flow",
"inline table",
"flex run-in",
"list-item",
"list-item block",
"list-item inline",
"list-item flow",
"list-item flow-root",
"list-item block flow",
"list-item block flow-root",
"flow list-item block",
"table-row-group",
"table-header-group",
"table-footer-group",
"table-row",
"table-cell",
"table-column-group",
"table-column",
"table-caption",
"ruby-base",
"ruby-text",
"ruby-base-container",
"ruby-text-container",
"contents",
"none",
"inline-block",
"inline-table",
"inline-flex",
"inline-grid",
"inherit",
"initial",
"unset"

flex <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

<T> | Array<<T>>One of
number,
string

grid <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

<T> | Array<<T>>string

gridArea <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

<T> | Array<<T>>string

gridAutoColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

<T> | Array<<T>>string

gridAutoFlow <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

<T> | Array<<T>>One of
"row",
"column",
"dense",
"row dense",
"column dense",
"inherit",
"initial",
"unset"

gridAutoRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

<T> | Array<<T>>string

gridColumn <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

<T> | Array<<T>>string

gridColumnEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

<T> | Array<<T>>string

gridColumnGap <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap

<T> | Array<<T>>One of
0,
string

gridColumnStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start

<T> | Array<<T>>string

gridGap <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap

<T> | Array<<T>>One of
0,
string

gridRow <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

<T> | Array<<T>>string

gridRowEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end

<T> | Array<<T>>string

gridRowGap <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap

<T> | Array<<T>>One of
0,
string

gridRowStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

<T> | Array<<T>>string

gridTemplate <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

<T> | Array<<T>>string

gridTemplateAreas <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

<T> | Array<<T>>string

gridTemplateColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

<T> | Array<<T>>string

gridTemplateRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

<T> | Array<<T>>string

justifyContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"left",
"right",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

justifyItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"legacy right",
"legacy left",
"legacy center",
"inherit",
"initial",
"unset"

justifySelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

position <T> | Array<<T>><union>

<T> | Array<<T>>One of
"static",
"absolute",
"relative",
"fixed",
"sticky"

width <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

minWidth <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

maxWidth <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

height <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

minHeight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

maxHeight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

overflow <T> | Array<<T>><union>

<T> | Array<<T>>One of
"visible",
"hidden",
"scroll",
"scrollX",
"scrollY",
"auto",
"inherit",
"initial",
"unset"

margin <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginTop <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginRight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginBottom <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginLeft <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

padding <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingTop <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingRight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingBottom <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingLeft <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

placeContent <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content

<T> | Array<<T>>string

placeItems <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

<T> | Array<<T>>string

placeSelf <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self

<T> | Array<<T>>string

flexWrap <T> | Array<<T>><boolean>

<T> | Array<<T>>boolean

left <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

top <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

right <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

bottom <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

textOverflow <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

<T> | Array<<T>>string

whiteSpace <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

<T> | Array<<T>>One of
"normal",
"nowrap",
"pre",
"pre-wrap",
"pre-line",
"break-spaces",
"inherit",
"initial",
"unset"

FlexGridItem API

flexGridColumnCount <T> | Array<<T>><number>

Number of equal-width columns to allow for

<T> | Array<<T>>number

flexGridColumnGap <T> | Array<<T>><union>

Grid gap between columns

<T> | Array<<T>>One of
0,
string

flexGridRowGap <T> | Array<<T>><union>

Grid gap between rows

<T> | Array<<T>>One of
0,
string

children import

react.Node

as import

Modifies the base element used to render the block.

react.ElementType

overrides object

Block { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

color <T> | Array<<T>><string>

Accepts all themeable color properties (primary200, etc.).

<T> | Array<<T>>string

backgroundAttachment <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

<T> | Array<<T>>string

backgroundClip <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

<T> | Array<<T>>string

backgroundColor <T> | Array<<T>><string>

Accepts all themeable color properties (primary200, etc.).

<T> | Array<<T>>string

backgroundImage <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

<T> | Array<<T>>string

backgroundOrigin <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

<T> | Array<<T>>string

backgroundPosition <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

<T> | Array<<T>>string

backgroundRepeat <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

<T> | Array<<T>>string

backgroundSize <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

<T> | Array<<T>>string

font union

Accepts all themeable font properties (font200, etc.).

One of
string,
Arraystring

alignContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"normal",
"baseline",
"first baseline",
"last baseline",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

<T> | Array<<T>>One of
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignSelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

<T> | Array<<T>>One of
"auto",
"normal",
"center",
"start",
"end",
"self-start",
"self-end",
"flex-start",
"flex-end",
"baseline",
"first baseline",
"last baseline",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

flexDirection <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

<T> | Array<<T>>One of
"row",
"row-reverse",
"column",
"column-reverse",
"inherit",
"initial",
"unset"

display <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/display

<T> | Array<<T>>One of
"block",
"inline",
"run-in",
"flow",
"flow-root",
"table",
"flex",
"grid",
"ruby",
"block flow",
"inline table",
"flex run-in",
"list-item",
"list-item block",
"list-item inline",
"list-item flow",
"list-item flow-root",
"list-item block flow",
"list-item block flow-root",
"flow list-item block",
"table-row-group",
"table-header-group",
"table-footer-group",
"table-row",
"table-cell",
"table-column-group",
"table-column",
"table-caption",
"ruby-base",
"ruby-text",
"ruby-base-container",
"ruby-text-container",
"contents",
"none",
"inline-block",
"inline-table",
"inline-flex",
"inline-grid",
"inherit",
"initial",
"unset"

flex <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

<T> | Array<<T>>One of
number,
string

grid <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

<T> | Array<<T>>string

gridArea <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

<T> | Array<<T>>string

gridAutoColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

<T> | Array<<T>>string

gridAutoFlow <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

<T> | Array<<T>>One of
"row",
"column",
"dense",
"row dense",
"column dense",
"inherit",
"initial",
"unset"

gridAutoRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

<T> | Array<<T>>string

gridColumn <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

<T> | Array<<T>>string

gridColumnEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

<T> | Array<<T>>string

gridColumnGap <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap

<T> | Array<<T>>One of
0,
string

gridColumnStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start

<T> | Array<<T>>string

gridGap <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap

<T> | Array<<T>>One of
0,
string

gridRow <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

<T> | Array<<T>>string

gridRowEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end

<T> | Array<<T>>string

gridRowGap <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap

<T> | Array<<T>>One of
0,
string

gridRowStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

<T> | Array<<T>>string

gridTemplate <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

<T> | Array<<T>>string

gridTemplateAreas <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

<T> | Array<<T>>string

gridTemplateColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

<T> | Array<<T>>string

gridTemplateRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

<T> | Array<<T>>string

justifyContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"left",
"right",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

justifyItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"legacy right",
"legacy left",
"legacy center",
"inherit",
"initial",
"unset"

justifySelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

position <T> | Array<<T>><union>

<T> | Array<<T>>One of
"static",
"absolute",
"relative",
"fixed",
"sticky"

width <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

minWidth <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

maxWidth <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

height <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

minHeight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

maxHeight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

overflow <T> | Array<<T>><union>

<T> | Array<<T>>One of
"visible",
"hidden",
"scroll",
"scrollX",
"scrollY",
"auto",
"inherit",
"initial",
"unset"

margin <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginTop <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginRight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginBottom <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

marginLeft <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

padding <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingTop <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingRight <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingBottom <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

paddingLeft <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

placeContent <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content

<T> | Array<<T>>string

placeItems <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

<T> | Array<<T>>string

placeSelf <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self

<T> | Array<<T>>string

flexWrap <T> | Array<<T>><boolean>

<T> | Array<<T>>boolean

left <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

top <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

right <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

bottom <T> | Array<<T>><union>

<T> | Array<<T>>One of
0,
string

textOverflow <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

<T> | Array<<T>>string

whiteSpace <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

<T> | Array<<T>>One of
"normal",
"nowrap",
"pre",
"pre-wrap",
"pre-line",
"break-spaces",
"inherit",
"initial",
"unset"