[EuiFlexGrid] Add justifyContent and alignItems like EuiFlexGroup

[j-m]

EuiFlexGroup has justifyContent and alignItems props, but EuiFlexGrid surprisingly doesn't.

[j-m]

@cchaos Seeing as EuiFlexItem is also display: flex, should EuiFlexItem also have these props?

[cchaos]

We've stayed away from adding those because it's a lot to maintain and then item is no longer different from group. The flex is mainly added to allow for stretching. We've instead instructed people to next EuiFlexGroup inside if they need more flex adjustments, or wrap their children <div> to get out of the flex model.

[bhargavjoshi]

I think we should close this issue.

[cchaos]

The issue is still valid for EuiFlexGrid, just not EuiFlexItem.

[hetanthakkar]

I am on it!

[hetanthakkar]

@cchaos @j-m By adding justify-content and align-items props, we also add the corresponding styling for the component when that prop is passed right!?

[j-m]

@cchaos FlexGroup and FlexGrid are incredibly similar, AFAICT grid realistically should just be a group with an implicit wrap and extra columns prop.

Grid is also missing reverse directions, as well a check on the component prop (group's is limited to div/span).

A breaking change to unify them and deprecate grid is probably a little OTT, but maybe grid should just use group under the hood?

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

[cchaos]

Re-opening. Still low-hanging fruit. Most likely to get tackled during the CSS-in-JS conversion.