> For the complete documentation index, see [llms.txt](https://ebay.gitbook.io/mindpatterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ebay.gitbook.io/mindpatterns/structure/layout-grid.md).

# 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.

<figure><img src="/files/0plw9LDls3OjuLFonBb4" alt=""><figcaption><p>A Layout Grid implementation with a set of buttons.</p></figcaption></figure>

### Developer Guide <a href="#developer-guide" id="developer-guide"></a>

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:

```html
<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:

```html
<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.

```html
<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.