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.

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.

A Layout Grid implementation with a set of buttons.

Developer Guide

Layout Grid is a grouping of a list of items/elements, typically of the same type. In this example, we're using a set of buttons:

<div class="layout-grid">
  <ul aria-label="My list of button">
    <li>
      <button class="btn btn--fluid">Button</button>
    </li>
    <li>
      <button class="btn btn--fluid">Button</button>
    </li>
    <li>
      <button class="btn btn--fluid">Button</button>
    </li>
    <li>
      <button class="btn btn--fluid">Button</button>
    </li>
    <li>
      <button class="btn btn--fluid">Button</button>
    </li>
    ...
  </ul>
</div>

Accessibility

The group of items/elements should be identified for screen readers. For lists that have an on-screen description text, it would look like this:

<h3 id="my-buttons-list-title">My List of Buttons</h3>
<div class="layout-grid">
  <ul aria-labelledby="my-buttons-list-title">
    <li>
      <button class="btn btn--fluid">Button</button>
    </li>
    ...
  </ul>
</div>

For instances where on-screen text is not available, an aria-label would work as well.

<div class="layout-grid">
  <ul aria-label="My list of button">
    <li>
      <button class="btn btn--fluid">Button</button>
    </li>
    ...
  </ul>
</div>

Keyboard Interaction

There are no interactive sections in Layout Grid, so there are no keyboard interaction guidelines.