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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ebay.gitbook.io/mindpatterns/structure/layout-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.