[grid] Theme variants or variables for horizontal padding of Grid #12865

Describe your motivation

Horizontal alignment of Grid columns is a bit challenging to get right. Often the desire is to get the first column to align with elements outside of the Grid as seen here:

In Aura, Grid cells have 16px paddings on the sides. Increasing the padding will introduce more perceived gap between columns, which is not desired or should be controlled separately.

Here's another use case where Grid appears inside a Card that already has padding.
The two first Cards show the current theme variants. Third one shows the no padding Grid variant. Fourth would be a theme variant on the Card instead of the Grid. Note the padding at the bottom of the Card.

Describe the solution you'd like

Theme variants

• no-outer-padding that removes outer paddings from first and last cell
• medium-outer-padding that sets first and last cell's outer padding to --vaadin-padding-m
• large-outer-padding and xlarge-outer-padding as well?

CSS variable

• Introduce --vaadin-grid-row-outer-padding for customizing value

Describe alternatives you've considered

No response

Additional context

No response