UI Schema

Grid System

Grid Container

1/2
1/2
1/3
2/9
4/9
1/4
3/16
9/16
1/5
1/5
3/10
<div class="ui-container-grid">
  <div class="ui-grid-50">1/2</div>
  <div class="ui-grid-50">1/2</div>
</div>
<div class="ui-container-grid">
  <div class="ui-grid-33">1/3</div>
  <div class="ui-grid-67 ui-grid-collapse">
    <div class="ui-grid-33">2/9</div>
    <div class="ui-grid-67">4/9</div>
  </div>
</div>
<div class="ui-container-grid">
  <div class="ui-grid-25">1/4</div>
  <div class="ui-grid-75 ui-grid-collapse">
    <div class="ui-grid-25">3/16</div>
    <div class="ui-grid-75">9/16</div>
  </div>
</div>
<div class="ui-container-grid">
  <div class="ui-grid-20">1/5</div>
  <div class="ui-grid-20 ui-offset-10">1/5</div>
  <div class="ui-grid-30 ui-offset-20">3/10</div>
</div>

Masonry Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="ui-layout-masonry ui-columns-6">
  <div style="height:50px;">1</div>
  <div style="height:100px;">2</div>
  <div style="height:150px;">3</div>
  <div style="height:150px;">4</div>
  <div style="height:50px;">5</div>
  <div style="height:100px;">6</div>
  <div style="height:50px;">7</div>
  <div style="height:100px;">8</div>
  <div style="height:150px;">9</div>
  <div style="height:100px;">10</div>
  <div style="height:150px;">11</div>
  <div style="height:50px;">12</div>
  <div style="height:50px;">13</div>
  <div style="height:150px;">14</div>
  <div style="height:100px;">15</div>
  <div style="height:50px;">16</div>
  <div style="height:100px;">17</div>
  <div style="height:150px;">18</div>
</div>