Layout Grid Component

A generic, responsive layout grid for repeating UI elements in a container.

This component will lay out repeating elements based on internal rules per device viewport breakpoint. The elements will responsively shrink and stretch inside their container at any and all screen sizes.

We use display: grid to create a predefined allotted number of elements slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows elements to shrink/stretch the predefined number of items at each breakpoint with a fallback to media queries for unsupported browsers.

The responsive rules around how many elements appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have a responsive layout of elements at various screen sizes.