diff --git a/src/components/flex/__snapshots__/flex_grid.test.tsx.snap b/src/components/flex/__snapshots__/flex_grid.test.tsx.snap
index d27f5ddcaa9..8833f23f645 100644
--- a/src/components/flex/__snapshots__/flex_grid.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_grid.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`EuiFlexGrid is rendered 1`] = `
@@ -12,74 +12,104 @@ exports[`EuiFlexGrid is rendered 1`] = `
`;
+exports[`EuiFlexGrid props alignItems baseline is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props alignItems center is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props alignItems end is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props alignItems start is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props alignItems stretch is rendered 1`] = `
+
+`;
+
exports[`EuiFlexGrid props columns 1 is rendered 1`] = `
`;
exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
`;
exports[`EuiFlexGrid props columns 3 is rendered 1`] = `
`;
exports[`EuiFlexGrid props columns 4 is rendered 1`] = `
`;
exports[`EuiFlexGrid props direction column is rendered 1`] = `
`;
exports[`EuiFlexGrid props direction row is rendered 1`] = `
`;
exports[`EuiFlexGrid props gutterSize l is rendered 1`] = `
`;
exports[`EuiFlexGrid props gutterSize m is rendered 1`] = `
`;
exports[`EuiFlexGrid props gutterSize none is rendered 1`] = `
`;
exports[`EuiFlexGrid props gutterSize s is rendered 1`] = `
`;
exports[`EuiFlexGrid props gutterSize xl is rendered 1`] = `
`;
exports[`EuiFlexGrid props responsive is rendered 1`] = `
`;
diff --git a/src/components/flex/flex_grid.styles.ts b/src/components/flex/flex_grid.styles.ts
index b41c6b589bc..9465a743bfc 100644
--- a/src/components/flex/flex_grid.styles.ts
+++ b/src/components/flex/flex_grid.styles.ts
@@ -64,5 +64,22 @@ export const euiFlexGridStyles = (
gap: ${euiTheme.size.xl};
`,
},
+ alignItems: {
+ stretch: css`
+ align-items: stretch;
+ `,
+ start: css`
+ align-items: start;
+ `,
+ end: css`
+ align-items: end;
+ `,
+ center: css`
+ align-items: center;
+ `,
+ baseline: css`
+ align-items: baseline;
+ `,
+ },
};
};
diff --git a/src/components/flex/flex_grid.test.tsx b/src/components/flex/flex_grid.test.tsx
index f987d90fc68..0ca46bc4f0b 100644
--- a/src/components/flex/flex_grid.test.tsx
+++ b/src/components/flex/flex_grid.test.tsx
@@ -11,7 +11,12 @@ import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import { shouldRenderCustomStyles } from '../../test/internal';
-import { EuiFlexGrid, GUTTER_SIZES, DIRECTIONS } from './flex_grid';
+import {
+ EuiFlexGrid,
+ GUTTER_SIZES,
+ DIRECTIONS,
+ ALIGN_ITEMS,
+} from './flex_grid';
describe('EuiFlexGrid', () => {
shouldRenderCustomStyles();
@@ -57,6 +62,16 @@ describe('EuiFlexGrid', () => {
});
});
+ describe('alignItems', () => {
+ ALIGN_ITEMS.forEach((value) => {
+ test(`${value} is rendered`, () => {
+ const component = render();
+
+ expect(component).toMatchSnapshot();
+ });
+ });
+ });
+
describe('responsive', () => {
test('is rendered', () => {
const component = render();
diff --git a/src/components/flex/flex_grid.tsx b/src/components/flex/flex_grid.tsx
index 7866d3ee0dd..00576c47437 100644
--- a/src/components/flex/flex_grid.tsx
+++ b/src/components/flex/flex_grid.tsx
@@ -21,6 +21,15 @@ import { euiFlexGridStyles } from './flex_grid.styles';
export const DIRECTIONS = ['row', 'column'] as const;
export type FlexGridDirection = typeof DIRECTIONS[number];
+export const ALIGN_ITEMS = [
+ 'stretch',
+ 'start',
+ 'end',
+ 'center',
+ 'baseline',
+] as const;
+export type FlexGridAlignItems = typeof ALIGN_ITEMS[number];
+
export const GUTTER_SIZES = ['none', 's', 'm', 'l', 'xl'] as const;
export type FlexGridGutterSize = typeof GUTTER_SIZES[number];
@@ -38,6 +47,10 @@ export interface EuiFlexGridProps {
* Change this prop to `column` to create a top-down then left-right display.
*/
direction?: FlexGridDirection;
+ /**
+ * Aligns grid items vertically
+ */
+ alignItems?: FlexGridAlignItems;
/**
* Space between flex items
*/
@@ -61,6 +74,7 @@ export const EuiFlexGrid: FunctionComponent<
className,
gutterSize = 'l',
direction = 'row',
+ alignItems = 'stretch',
responsive = true,
columns = 1,
component: Component = 'div',
@@ -77,6 +91,7 @@ export const EuiFlexGrid: FunctionComponent<
styles.euiFlexGrid,
styles.gutterSizes[gutterSize],
styles.direction[direction],
+ styles.alignItems[alignItems],
styles.columnCount[columns],
responsive && styles.responsive,
];
diff --git a/upcoming_changelogs/6281.md b/upcoming_changelogs/6281.md
new file mode 100644
index 00000000000..9e732ffc3b3
--- /dev/null
+++ b/upcoming_changelogs/6281.md
@@ -0,0 +1 @@
+- Added the `alignItems` prop to `EuiFlexGrid`