# grid-match

The markup of every demo on <https://kuiper.oeds.it/grid-match/>, 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-match

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="grid-xs grid-match" data-grid>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>A cell whose content is taller than its neighbours.</p><p>It sets the row height.</p><p>Three paragraphs.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>One line.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>One line.</p></div></div>
 </div></div>
</div>
```

## grid-item-match

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs grid-item-match"><p>A cell whose content is taller than its neighbours.</p><p>It sets the row height.</p><p>Three paragraphs.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs grid-item-match"><p>One line.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs grid-item-match"><p>One line.</p></div></div>
 </div></div>
</div>
```

## data-height-match

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="grid-xs" data-grid data-height-match="target: &gt; div &gt; .card">
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>A cell whose content is taller than its neighbours.</p><p>It sets the row height.</p><p>Three paragraphs.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>One line.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>One line.</p></div></div>
 </div></div>
</div>
```

## without either, for comparison

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>A cell whose content is taller than its neighbours.</p><p>It sets the row height.</p><p>Three paragraphs.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>One line.</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card border padding-2xs"><p>One line.</p></div></div>
 </div></div>
</div>
```