@gridonic/grid/dist/grid.css

A CSS Grid based on the flex display property written entirely in Sass respecting the rscss system.

/*! @gridonic/grid v0.5.0 */.grid-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:1440px;padding-left:15px;padding-right:15px;width:100%}.grid-container.-no-limit{max-width:none}.grid-container.-no-outer{overflow:hidden;padding-left:0;padding-right:0}.grid-row{-ms-flex:0 1 auto;-ms-flex-flow:row wrap;-webkit-box-direction:normal;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;flex:0 1 auto;flex-flow:row wrap;margin-left:-15px;margin-right:-15px}.grid-row>.column{padding-left:15px;padding-right:15px}.grid-row.-reverse{-ms-flex-direction:row-reverse;-webkit-box-direction:reverse;-webkit-box-orient:horizontal;flex-direction:row-reverse}.grid-row>.column{-ms-flex:0 0 auto;-webkit-box-flex:0;-webkit-box-sizing:border-box;box-sizing:border-box;flex:0 0 auto;max-width:100%}.grid-row>.column.-reverse{-ms-flex-direction:column-reverse;-webkit-box-direction:reverse;-webkit-box-orient:vertical;flex-direction:column-reverse}.grid-row.-xs-left,.grid-row.-xs-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-xs-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-xs-end,.grid-row.-xs-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-xs-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-xs-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-xs-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-xs-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-xs-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-xs{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-xs-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-xs-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-xs-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-xs-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-xs-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-xs-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-xs-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-xs-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-xs-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-xs-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-xs-offset-0{margin-left:0}.grid-row>.column.-xs-offset-1{margin-left:8.33333%}.grid-row>.column.-xs-offset-2{margin-left:16.66667%}.grid-row>.column.-xs-offset-3{margin-left:25%}.grid-row>.column.-xs-offset-4{margin-left:33.33333%}.grid-row>.column.-xs-offset-5{margin-left:41.66667%}.grid-row>.column.-xs-offset-6{margin-left:50%}.grid-row>.column.-xs-offset-7{margin-left:58.33333%}.grid-row>.column.-xs-offset-8{margin-left:66.66667%}.grid-row>.column.-xs-offset-9{margin-left:75%}.grid-row>.column.-xs-offset-10{margin-left:83.33333%}.grid-row>.column.-xs-offset-11{margin-left:91.66667%}@media (min-width:576px){.grid-container.-sm-fix{width:576px}.grid-row.-sm-left,.grid-row.-sm-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-sm-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-sm-end,.grid-row.-sm-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-sm-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-sm-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-sm-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-sm-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-sm-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-sm{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-sm-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-sm-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-sm-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-sm-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-sm-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-sm-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-sm-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-sm-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-sm-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-sm-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-sm-offset-0{margin-left:0}.grid-row>.column.-sm-offset-1{margin-left:8.33333%}.grid-row>.column.-sm-offset-2{margin-left:16.66667%}.grid-row>.column.-sm-offset-3{margin-left:25%}.grid-row>.column.-sm-offset-4{margin-left:33.33333%}.grid-row>.column.-sm-offset-5{margin-left:41.66667%}.grid-row>.column.-sm-offset-6{margin-left:50%}.grid-row>.column.-sm-offset-7{margin-left:58.33333%}.grid-row>.column.-sm-offset-8{margin-left:66.66667%}.grid-row>.column.-sm-offset-9{margin-left:75%}.grid-row>.column.-sm-offset-10{margin-left:83.33333%}.grid-row>.column.-sm-offset-11{margin-left:91.66667%}}@media (min-width:768px){.grid-container.-md-fix{width:768px}.grid-row.-md-left,.grid-row.-md-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-md-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-md-end,.grid-row.-md-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-md-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-md-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-md-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-md-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-md-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-md{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-md-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-md-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-md-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-md-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-md-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-md-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-md-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-md-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-md-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-md-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-md-offset-0{margin-left:0}.grid-row>.column.-md-offset-1{margin-left:8.33333%}.grid-row>.column.-md-offset-2{margin-left:16.66667%}.grid-row>.column.-md-offset-3{margin-left:25%}.grid-row>.column.-md-offset-4{margin-left:33.33333%}.grid-row>.column.-md-offset-5{margin-left:41.66667%}.grid-row>.column.-md-offset-6{margin-left:50%}.grid-row>.column.-md-offset-7{margin-left:58.33333%}.grid-row>.column.-md-offset-8{margin-left:66.66667%}.grid-row>.column.-md-offset-9{margin-left:75%}.grid-row>.column.-md-offset-10{margin-left:83.33333%}.grid-row>.column.-md-offset-11{margin-left:91.66667%}}@media (min-width:992px){.grid-container.-lg-fix{width:992px}.grid-row.-lg-left,.grid-row.-lg-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-lg-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-lg-end,.grid-row.-lg-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-lg-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-lg-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-lg-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-lg-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-lg-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-lg{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-lg-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-lg-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-lg-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-lg-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-lg-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-lg-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-lg-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-lg-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-lg-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-lg-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-lg-offset-0{margin-left:0}.grid-row>.column.-lg-offset-1{margin-left:8.33333%}.grid-row>.column.-lg-offset-2{margin-left:16.66667%}.grid-row>.column.-lg-offset-3{margin-left:25%}.grid-row>.column.-lg-offset-4{margin-left:33.33333%}.grid-row>.column.-lg-offset-5{margin-left:41.66667%}.grid-row>.column.-lg-offset-6{margin-left:50%}.grid-row>.column.-lg-offset-7{margin-left:58.33333%}.grid-row>.column.-lg-offset-8{margin-left:66.66667%}.grid-row>.column.-lg-offset-9{margin-left:75%}.grid-row>.column.-lg-offset-10{margin-left:83.33333%}.grid-row>.column.-lg-offset-11{margin-left:91.66667%}}@media (min-width:1200px){.grid-container.-xl-fix{width:1200px}.grid-row.-xl-left,.grid-row.-xl-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-xl-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-xl-end,.grid-row.-xl-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-xl-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-xl-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-xl-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-xl-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-xl-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-xl{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-xl-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-xl-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-xl-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-xl-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-xl-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-xl-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-xl-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-xl-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-xl-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-xl-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-xl-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-xl-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-xl-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-xl-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-xl-offset-0{margin-left:0}.grid-row>.column.-xl-offset-1{margin-left:8.33333%}.grid-row>.column.-xl-offset-2{margin-left:16.66667%}.grid-row>.column.-xl-offset-3{margin-left:25%}.grid-row>.column.-xl-offset-4{margin-left:33.33333%}.grid-row>.column.-xl-offset-5{margin-left:41.66667%}.grid-row>.column.-xl-offset-6{margin-left:50%}.grid-row>.column.-xl-offset-7{margin-left:58.33333%}.grid-row>.column.-xl-offset-8{margin-left:66.66667%}.grid-row>.column.-xl-offset-9{margin-left:75%}.grid-row>.column.-xl-offset-10{margin-left:83.33333%}.grid-row>.column.-xl-offset-11{margin-left:91.66667%}}