pompei.js Responsive Grid System Examples

Basic
Col 1
Col 2
Col 3
Col 1
Col 2
Col 3
Col 4
Col 5

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>

Colspan
Col 1
Col 2
Col 3

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

Col 2
Col 3

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>

Col 1
Col 3

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>

Col 1
Col 2

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>

Col 2

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>

Col 1
Col 3

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

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6

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>

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6

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

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6

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>

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6

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>

Media Queries
Col 1
Col 2
Col 3

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

Col 1
Col 2
Col 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

Col 1
Col 2
Col 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

Col 1
Col 2
Col 3

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

Col 1
Col 2
Col 3

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

Col 1
Col 2
Col 3

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

Col 2

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>

Responsive Breakpoints
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12

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

Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12

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>

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9

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>

Col 1
Col 2
Col 3

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>