GoldenRatio Grid

One golden ratio grid system

View the Project on GitHub JanoschOltmanns/gr-grid

Examples.

.col-md-gr47
.col-md-gr53
.col-md-gr38
.col-md-gr62
.col-md-gr29
.col-md-gr71
.col-md-gr24
.col-md-gr76
.col-md-gr53
.col-md-gr47
.col-md-gr62
.col-md-gr38
.col-md-gr71
.col-md-gr29
.col-md-gr76
.col-md-gr24
.col-md-gr29
.col-md-gr71
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-gr29
.col-md-gr71
.col-sm-6
.col-sm-6
.col-md-gr38
.col-md-gr62
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-gr38
.col-md-gr62
.col-sm-6
.col-sm-6

Available grid classes

Extra small devices

Column Offset Push Pull
.col-xs-gr24 .col-xs-offset-gr24 .col-xs-push-gr24 .col-xs-pull-gr24
.col-xs-gr29 .col-xs-offset-gr29 .col-xs-push-gr29 .col-xs-pull-gr29
.col-xs-gr38 .col-xs-offset-gr38 .col-xs-push-gr38 .col-xs-pull-gr38
.col-xs-gr47 .col-xs-offset-gr47 .col-xs-push-gr47 .col-xs-pull-gr47
.col-xs-gr53 .col-xs-offset-gr53 .col-xs-push-gr53 .col-xs-pull-gr53
.col-xs-gr62 .col-xs-offset-gr62 .col-xs-push-gr62 .col-xs-pull-gr62
.col-xs-gr71 .col-xs-offset-gr71 .col-xs-push-gr71 .col-xs-pull-gr71
.col-xs-gr76 .col-xs-offset-gr76 .col-xs-push-gr76 .col-xs-pull-gr76

Small devices

Column Offset Push Pull
.col-sm-gr24 .col-sm-offset-gr24 .col-sm-push-gr24 .col-sm-pull-gr24
.col-sm-gr29 .col-sm-offset-gr29 .col-sm-push-gr29 .col-sm-pull-gr29
.col-sm-gr38 .col-sm-offset-gr38 .col-sm-push-gr38 .col-sm-pull-gr38
.col-sm-gr47 .col-sm-offset-gr47 .col-sm-push-gr47 .col-sm-pull-gr47
.col-sm-gr53 .col-sm-offset-gr53 .col-sm-push-gr53 .col-sm-pull-gr53
.col-sm-gr62 .col-sm-offset-gr62 .col-sm-push-gr62 .col-sm-pull-gr62
.col-sm-gr71 .col-sm-offset-gr71 .col-sm-push-gr71 .col-sm-pull-gr71
.col-sm-gr76 .col-sm-offset-gr76 .col-sm-push-gr76 .col-sm-pull-gr76

Medium devices

Column Offset Push Pull
.col-md-gr24 .col-md-offset-gr24 .col-md-push-gr24 .col-md-pull-gr24
.col-md-gr29 .col-md-offset-gr29 .col-md-push-gr29 .col-md-pull-gr29
.col-md-gr38 .col-md-offset-gr38 .col-md-push-gr38 .col-md-pull-gr38
.col-md-gr47 .col-md-offset-gr47 .col-md-push-gr47 .col-md-pull-gr47
.col-md-gr53 .col-md-offset-gr53 .col-md-push-gr53 .col-md-pull-gr53
.col-md-gr62 .col-md-offset-gr62 .col-md-push-gr62 .col-md-pull-gr62
.col-md-gr71 .col-md-offset-gr71 .col-md-push-gr71 .col-md-pull-gr71
.col-md-gr76 .col-md-offset-gr76 .col-md-push-gr76 .col-md-pull-gr76

Large devices

Column Offset Push Pull
.col-lg-gr24 .col-lg-offset-gr24 .col-lg-push-gr24 .col-lg-pull-gr24
.col-lg-gr29 .col-lg-offset-gr29 .col-lg-push-gr29 .col-lg-pull-gr29
.col-lg-gr38 .col-lg-offset-gr38 .col-lg-push-gr38 .col-lg-pull-gr38
.col-lg-gr47 .col-lg-offset-gr47 .col-lg-push-gr47 .col-lg-pull-gr47
.col-lg-gr53 .col-lg-offset-gr53 .col-lg-push-gr53 .col-lg-pull-gr53
.col-lg-gr62 .col-lg-offset-gr62 .col-lg-push-gr62 .col-lg-pull-gr62
.col-lg-gr71 .col-lg-offset-gr71 .col-lg-push-gr71 .col-lg-pull-gr71
.col-lg-gr76 .col-lg-offset-gr76 .col-lg-push-gr76 .col-lg-pull-gr76

Extra large devices

Column Offset Push Pull
.col-xl-gr24 .col-xl-offset-gr24 .col-xl-push-gr24 .col-xl-pull-gr24
.col-xl-gr29 .col-xl-offset-gr29 .col-xl-push-gr29 .col-xl-pull-gr29
.col-xl-gr38 .col-xl-offset-gr38 .col-xl-push-gr38 .col-xl-pull-gr38
.col-xl-gr47 .col-xl-offset-gr47 .col-xl-push-gr47 .col-xl-pull-gr47
.col-xl-gr53 .col-xl-offset-gr53 .col-xl-push-gr53 .col-xl-pull-gr53
.col-xl-gr62 .col-xl-offset-gr62 .col-xl-push-gr62 .col-xl-pull-gr62
.col-xl-gr71 .col-xl-offset-gr71 .col-xl-push-gr71 .col-xl-pull-gr71
.col-xl-gr76 .col-xl-offset-gr76 .col-xl-push-gr76 .col-xl-pull-gr76