pompei.js Responsive Grid System Examples
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
<div class="pp-col">
Col 4
</div>
<div class="pp-col">
Col 5
</div>
</div>
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-colspan-4">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
Offset
HTML
<div class="pp-row">
<div class="pp-col pp-offset"></div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-offset"></div>
<div class="pp-col">
Col 3
</div>
</div>
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col pp-offset"></div>
</div>
HTML
<div class="pp-row">
<div class="pp-col pp-offset"></div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col pp-offset"></div>
</div>
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-offset pp-colspan-4"></div>
<div class="pp-col">
Col 3
</div>
</div>
No Margin
HTML
<div class="pp-row pp-no-margin">
<div class="pp-col">
Col 1
</div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col pp-no-margin">
Col 3
</div>
<div class="pp-col pp-no-margin">
Col 4
</div>
<div class="pp-col">
Col 5
</div>
<div class="pp-col">
Col 6
</div>
</div>
HTML
<div class="pp-row pp-no-margin">
<div class="pp-col">
Col 1
</div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
<div class="pp-col">
Col 4
</div>
<div class="pp-col">
Col 5
</div>
<div class="pp-col">
Col 6
</div>
</div>
No Padding
HTML
<div class="pp-row pp-no-margin">
<div class="pp-col">
Col 1
</div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col pp-no-padding">
Col 3
</div>
<div class="pp-col pp-no-padding">
Col 4
</div>
<div class="pp-col">
Col 5
</div>
<div class="pp-col">
Col 6
</div>
</div>
HTML
<div class="pp-row pp-no-padding">
<div class="pp-col">
Col 1
</div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
<div class="pp-col">
Col 4
</div>
<div class="pp-col">
Col 5
</div>
<div class="pp-col">
Col 6
</div>
</div>
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-colspan-sm-3">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
pp-colspan-md-3
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-colspan-md-3">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
pp-colspan-lg-3
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-colspan-lg-3">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
pp-hidden-sm
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-hidden-sm">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
pp-hidden-md
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-hidden-md">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
pp-hidden-lg
HTML
<div class="pp-row">
<div class="pp-col">
Col 1
</div>
<div class="pp-col pp-hidden-lg">
Col 2
</div>
<div class="pp-col">
Col 3
</div>
</div>
pp-hidden-sm pp-hidden-md pp-offset
HTML
<div class="pp-row">
<div class="pp-col pp-hidden-sm pp-hidden-md pp-offset"></div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col pp-hidden-sm pp-hidden-md pp-offset"></div>
</div>
HTML
<div class="pp-row">
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 1
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 2
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 3
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 4
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 5
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 6
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 7
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 8
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 9
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 10
</div>
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 11
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 12
</div>
</div>
More Examples
Responsive Offset
HTML
<div class="pp-row">
<div class="pp-col-sm-5 pp-offset-sm-5 pp-col-md-2 pp-offset-md-2 pp-col-lg-1 pp-offset-lg-1">
Col 2
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 3
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 4
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 5
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 6
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 7
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 8
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 9
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 10
</div>
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 11
</div>
<div class="pp-col-sm-5 pp-col-md-2 pp-col-lg-1">
Col 12
</div>
</div>
HTML
<div class="pp-row">
<div class="pp-col-lg-2">
Col 1
</div>
<div class="pp-col-lg-2">
Col 2
</div>
<div class="pp-col-lg-2">
Col 3
</div>
<div class="pp-col">
Col 4
</div>
<div class="pp-col">
Col 5
</div>
<div class="pp-col">
Col 6
</div>
<div class="pp-col">
Col 7
</div>
</div>
HTML
<div class="pp-row">
<div class="pp-col-lg-3">
Col 1
</div>
<div class="pp-col">
Col 2
</div>
<div class="pp-col-lg-3">
Col 3
</div>
</div>