# grid-divider

The markup of every demo on <https://kuiper.oeds.it/grid-divider/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## grid

Varies: 15 specimens.

```html
<div class="grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-collapse

Varies: 15 specimens.

```html
<div class="grid-collapse grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-collapse grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-collapse grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-collapse grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-collapse grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-collapse grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-0

Varies: 15 specimens.

```html
<div class="grid-0 grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-0 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-0 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-0 grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-0 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-0 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-1

Varies: 15 specimens.

```html
<div class="grid-1 grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-1 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-1 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-1 grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-1 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-1 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-2

Varies: 15 specimens.

```html
<div class="grid-2 grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2 grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-3

Varies: 15 specimens.

```html
<div class="grid-3 grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3 grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3 grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3 grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-5xs

Varies: 15 specimens.

```html
<div class="grid-5xs grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xs grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-4xs

Varies: 15 specimens.

```html
<div class="grid-4xs grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xs grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-3xs

Varies: 15 specimens.

```html
<div class="grid-3xs grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xs grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-2xs

Varies: 15 specimens.

```html
<div class="grid-2xs grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xs grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-xs

Varies: 15 specimens.

```html
<div class="grid-xs grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-s

Varies: 15 specimens.

```html
<div class="grid-s grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-s grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-s grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-s grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-s grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-s grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-m

Varies: 15 specimens.

```html
<div class="grid-m grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-m grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-m grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-m grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-m grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-m grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-l

Varies: 15 specimens.

```html
<div class="grid-l grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-l grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-l grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-l grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-l grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-l grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-xl

Varies: 15 specimens.

```html
<div class="grid-xl grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xl grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-2xl

Varies: 15 specimens.

```html
<div class="grid-2xl grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xl grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-2xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-3xl

Varies: 15 specimens.

```html
<div class="grid-3xl grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xl grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-3xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-4xl

Varies: 15 specimens.

```html
<div class="grid-4xl grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xl grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-4xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```

## grid-5xl

Varies: 15 specimens.

```html
<div class="grid-5xl grid-divider" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xl grid-divider" data-grid>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
    <div class="width-1-4"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-4</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xl grid-divider" data-grid>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
    <div class="width-1-2"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-2</p></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-5xl grid-divider" data-grid>
    <div class="width-1-1"><div class="card"><p class="text-center background-white padding-5xs text-truncate">width-1-1</p></div></div>
   </div>
  </div>
 </div>
</div>
```
