# grid-masonry

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

## true

Varies: the `height-*` ladder over 3 rungs, `s` to `l`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><div class="grid-xs" data-grid="masonry: true;"><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-s background-white-dark"><p class="background-muted text-center">1</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-m background-white-dark"><p class="background-muted text-center">2</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-s background-white-dark"><p class="background-muted text-center">3</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-l background-white-dark"><p class="background-muted text-center">4</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-m background-white-dark"><p class="background-muted text-center">5</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-s background-white-dark"><p class="background-muted text-center">6</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-l background-white-dark"><p class="background-muted text-center">7</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-m background-white-dark"><p class="background-muted text-center">8</p></div></div></div></div></div>
</div>
```

## next

Varies: the `height-*` ladder over 3 rungs, `s` to `l`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><div class="grid-xs" data-grid="masonry: next;"><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-s background-white-dark"><p class="background-muted text-center">1</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-m background-white-dark"><p class="background-muted text-center">2</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-s background-white-dark"><p class="background-muted text-center">3</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-l background-white-dark"><p class="background-muted text-center">4</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-m background-white-dark"><p class="background-muted text-center">5</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-s background-white-dark"><p class="background-muted text-center">6</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-l background-white-dark"><p class="background-muted text-center">7</p></div></div><div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-4@xl"><div class="card height-m background-white-dark"><p class="background-muted text-center">8</p></div></div></div></div></div>
</div>
```