# container-expand

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

## container-expand

Varies: the `container-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="card"><div class="container background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-expand-left background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-expand-left</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-expand-right background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-expand-right</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-expand background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-expand</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xs background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xs</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xs container-expand-left background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xs container-expand-left</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xs container-expand-right background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xs container-expand-right</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xs container-expand background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xs container-expand</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-s background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-s</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-s container-expand-left background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-s container-expand-left</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-s container-expand-right background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-s container-expand-right</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-s container-expand background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-s container-expand</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-m background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-m</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-m container-expand-left background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-m container-expand-left</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-m container-expand-right background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-m container-expand-right</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-m container-expand background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-m container-expand</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-l background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-l</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-l container-expand-left background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-l container-expand-left</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-l container-expand-right background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-l container-expand-right</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-l container-expand background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-l container-expand</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xl background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xl</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xl container-expand-left background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xl container-expand-left</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xl container-expand-right background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xl container-expand-right</p></div></div></div></div>
 <div class="width-1-1"><div class="card"><div class="container container-xl container-expand background-gray-xlight"><div class="card background-white padding-xs-vertical"><p>container-xl container-expand</p></div></div></div></div>
</div>
```