feat(grid): improve UX/UI of donation form grid

[kevinwhoffman]

User Story

As a developer, I want to display the donation form grid via CSS Grid instead of Flexbox so that my galleries can respond to the available space.

There are also a number of shortcode attributes that should be added so that users have control over their form grids.

Current Behavior

I currently use Flexbox and have to specifically choose the max number of columns rather than allowing the gallery to determine its own best fit. My layout options are also limited as Flexbox excels at one-directional layouts whereas Grid excels at two-directional layouts.

Expected Behavior

I expect to use CSS Grid as it is the future of grid-style layouts on the web and should be introduced early before third-party developers start customizing styles based on another approach.

Possible Solution

Replace the current Flexbox layout with CSS Grid and add a Best Fit default style that lay out grid items according the available space.

Related

Issues

• feat(form): display multiple forms in a grid feat(grid): display multiple forms in a grid #1414 feat(grid): display multiple forms in a grid #1414 #2783
• design(donor): create a list and grid donor wall view design(donor): create a list and grid donor wall view #2900

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• https://www.youtube.com/watch?v=FEnRpy9Xfes
• https://www.youtube.com/watch?v=dQHtT47eH0M

Tasks

• Replace Flexbox with CSS Grid for the donation form grid layout.
• Style according to Best Fit by default.
• Add fallback styles for browsers that don't support Grid.

[kevinwhoffman]

Slack Call Summary

Participants: @DevinWalker, @kevinwhoffman
Topic: Review Donation Form Grid styles and behavior
Result: New Grid styles are in place and the overall direction has been approved. Remaining tasks include:

Kevin's Tasks for this Issue

• Clarify shortcode attribute names.
• Add missing attributes defined below.
• Style pagination.
• Add shortcode attribute to define number of forms displayed.

Sid's Tasks in New Issue

I'm documenting these here temporarily until I can create a new issue.

• Generate excerpt from form content if the excerpt field is empty.
• Load modal forms via AJAX rather than hiding every form on the page.

[kevinwhoffman]

Slack Call Summary

Participants: @mathetos , @kevinwhoffman
Topic: Review shortcode name and attributes
Result: Matt and Kevin discussed shortcode attributes and decided on [give_form_grid].