feat(page-grid): recovered subgrid, updated docs

[ArtBlue]

Fixes #2030

• This PR contains CSS changes
• This PR does not contain CSS changes

Description

• Brought back subgrid as the default internal grid mechanism.
• Separated and retained and commented out (until official specifications/support) the nested grid mechanism.
• Updated Skin docs with subgrid usage details.
• Updated Skin docs with css properties and less constants info for easier referencing.

Screenshots

The distinction between nested grids and subgrids:

Checklist

• I verify the build is in a non-broken state
• I verify all changes are within scope of the linked issue

• I regenerated all CSS files under dist folder
• I tested the UI in all supported browsers
• I did a visual regression check of the components impacted by doing a Percy build and approved the build
• I tested the UI in dark mode and RTL mode
• I added/updated/removed Storybook coverage as appropriate

[agliga]

LGTM!

[agliga]

One thing I did notice, but not sure if its due to this, examples are a bit messed up

On the left side, the top nav bar is cut off and you cant see all items. Not sure if its intentional but looks bad.
On the right one, when you shrink it, it actually collapses strangely. When you increase the size it fits properly. Not sure if its an issue with implementation or just example.

We can do it in followup if needed though. I'm fine with this going as is.

[ArtBlue]

One thing I did notice, but not sure if its due to this, examples are a bit messed up. On the left side, the top nav bar is cut off and you cant see all items. Not sure if its intentional but looks bad. On the right one, when you shrink it, it actually collapses strangely. When you increase the size it fits properly. Not sure if its an issue with implementation or just example.

We can do it in followup if needed though. I'm fine with this going as is.

This wasn't created by this PR and we don't technically support layouts < 320px, which is the only time this would occur, but I went ahead and fixed it anyway.

[ianmcburnie]

Seems like the debug mode is having some issues. When I click the link the debug styles aren't showing up correctly.

[ArtBlue]

Seems like the debug mode is having some issues. When I click the link the debug styles aren't showing up correctly.

Yep. The js that was turning on the debug mode in the elements was only targeting the first one it found. I fixed it.