GridLayout Suggestions

[brianblakely]

*Gauging interest in pursuing these suggestions. I would be happy to file a PR for the same.

I have recently completed a large migration to Salt from a former design system and one of the tasks that I spent the most time doing was converging on a layout methodology using Salt's provided solutions. What I found was that I could not use GridLayout due to some limitations that I believe can be expanded with some simple, non-breaking enhancements.

Column Templates

Issue
GridLayout assigns every column a width of 1fr. Sometimes I would like column width to conform to content or a unit-based value that is not fr.

Suggested Solution
columns prop may accept an array which maps to grid-template-columns. Each array element accepts the following types:

• number: Maps to fr units.
• string: Maps to a literal value.

Example
<GridLayout columns={[1, "auto", "10ch"]} rows={2}>

Automatic Row Creation

Issue
Layouts may change the number of rows dynamically. While this can be handled in-app by providing a programmatic numeric value to rows, it can grow cumbersome with many conditions.

Suggested Solution
rows prop may accept a string which maps to grid-auto-rows.

Example
<GridLayout columns={3} rows="100px">
<GridLayout columns={3} rows="auto">

[origami-z]

Sounds reasonable to me. Hopefully this doesn't have impact on ResponsiveProp behaviours

[mark-tate]

Thanks for the suggestion, this has now been implemented
d885e02#diff-17760cb6c793a307a7f08718d65f023f69dcb2d2b2d5ee62b8b6e62c6995d6d4