Layout Grid

A generic responsive layout grid for repeating UI elements in a container. These could be purely visual elements or interactive. 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.

Default Display Breakpoint Rules

Default Layouts with Radio Buttons

Accessibility is baked in using a link to an on-screen text with the use of the aria-labelledby attribute on the list container. This is used to provide a label for the list of items. This mehod should be used when there is on-screen text.

Here's an example of the default layout grid component used with radio buttons to create a more balanced layout than would result from simply an inline treatment.

Default Layouts with Buttons

Here's an example of the default layout grid component used with buttons to create a more balanced layout than would result from simply an inline treatment.

Accessibility is baked in with the use of the aria-label attribute on the list container. This is used to provide a label for the list of items. This mehod can be used when there is no on-screen text.

Here we're using fluid buttons to fill the available space in the layout grid.

Custom Display Breakpoint Rules

If you need to create custom display rules for how many items should appear per line at each breakpoint, you can override the default display rules by adding attributes to the layout grid container.

The attributes follow the format data-columns-[breakpoint]="[number]" where [breakpoint] is the breakpoint name and [number] is the number of columns you want to display at that breakpoint.

Custom Layouts with Buttons

In this example, we're setting custom layout columns for various breakpoints. The default number of columns is 1, but we're setting it to 2. The default number of columns at the XS breakpoint is 2, but we're setting it to 3, so on and so forth. See the example code below for all the overrides. You may skip the breakpoints at which the default layout works for you.

Custom Layouts with Lists

In this example, we're creating a custom layout for the list component. Since list usually has a wider preferred layout, it may need more horizontal space. For that reason, we may want to use a custom layout for a group of list components.

See the list of data-columns-[breakpoint] attributes below for the custom layout. We've omitted custom breakpoint display rules that work well with the default rules.