Advanced authoring options in the section grid

[Sartxi]

We recently added the new action-item block and some of the layout design patterns are currently not possible using the section grid and seems like we need a more advanced authoring solution, leaving the current *-up functionality backward compatible.

The following are the missing options (to match design comps):

1. Ability to align items within the grid
2. Ability to justify items within the grid
3. Ability to set custom configurations per viewport (mobile, tablet, desktop)
4. Ability to set separate row/column gap spacing

@auniverseaway shared his proposal in Slack about this topic, which is adding a more advanced authoring pattern to the up grid in section metadata. I think this would be a great approach and would certainly satisfy the ask without convoluting the style row with a bunch more styles. I think this also seems intuitive for someone familiar with the css grid.

Example:

I also had the idea of a separate grid block that could be nested within the section. This block would adopt any of its siblings that aren't full-width or metadata. I think this would help avoid additional complexity in the section metadata block and provides a more specific location to expand on testing and functionality. That being said, I also think that adding a completely different method of rendering the grid could be confusing for authors. So its probably a better idea to keep the functionality in the section.

Example:

Looking for any direction or ideas on the best approach to this so we can keep the authoring simple and straightforward, like an apple watch 😉