Flex grids
Coloring and padding exist for examples only
Padding and background-color are added to all EuiFlexItems on this documentation page for illustrative purposes only. If needed, you must add your own padding through additional components or classes.
EuiFlexGrid is a more rigid component, used for repeatable rows of same-width items. You can set a
columns prop to specify anywhere between 1-4 columns. Any more would likely break on laptop screens.
Responsive flex grids
EuiFlexGrid is responsive by default, stacking items vertically on smaller screens. Should you want to customize the number of items on small or large screens, apply the responsive={false} prop and then conditionally pass a column number based on the current breakpoint.
Display customization
Align
Flex grids support vertically aligning children via the alignItems prop. Unlike flex groups, they do not support justifyContent, as grid columns are always evenly distributed.
Gutter sizing
The gutterSize prop can be applied to a parent EuiFlexGrid to adjust the spacing between child EuiFlexItems.
Changing direction
Adding direction="column" will re-orient the flex items so they display top-down then left to right.
Props
EuiFlexGrid
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop children# | Description and type ReactNode to render as this component's content ReactNode | Default value |
Prop columns# | Description and type Number of columns. Accepts 2 | 3 | 1 | 4 | Default value 1 |
Prop direction# | Description and type Flex layouts default to left-right then top-down ( "column" | "row" | Default value row |
Prop alignItems# | Description and type Aligns grid items vertically "center" | "stretch" | "end" | "start" | "baseline" | Default value stretch |
Prop gutterSize# | Description and type Space between flex items "s" | "m" | "l" | "xl" | "none" | Default value l |
Prop responsive# | Description and type Will display each item at full-width on smaller screens boolean | Default value true |
Prop component# | Description and type The tag to render ElementType | Default value div |