npm i sireno-grid --save // or yarn add sireno-grid
<div class="grid-row"> <div class="col-xs-12 col-sm-1"> ... </div> <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4"> ... </div> <div class="col-xs-12 col-sm-5 col-md-6 col-lg-7"> ... </div> </div>
<div class="grid-demo"> <div class="grid-row"> <div class="col-xs-6 col-xs-end-6 col-sm-4 col-sm-end-8"> col-xs-6 col-xs-end-6 col-sm-4 col-sm-end-8 </div> </div> <div class="grid-row"> <div class="col-xs-6 col-xs-end-10"> col-xs-6 col-xs-end-10 </div> </div> </div> </div>
<div class="grid-row"> <div class="col-xs-12 col-sm-2 col-sm-order-2"> A </div> <div class="col-xs-12 col-sm-2 col-sm-order-4"> B </div> <div class="col-xs-12 col-sm-3 col-sm-order-1"> C </div> <div class="col-xs-12 col-sm-4 col-sm-order-5"> D </div> <div class="col-xs-12 col-sm-1 col-sm-order-3"> E </div> </div>
<div class="grid-row"> <div class="col-xs-6 col-sm-4 no-gutter-right-sm"> ... </div> <div class="col-xs-6 col-sm-4 no-gutters-sm"> ... </div> <div class="col-xs-6 col-sm-4"> ... </div> </div> <div class="grid-row"> <div class="col-xs-12 no-gutters"> ... </div> </div> <div class="grid-row"> <div class="col-xs-12 col-sm-4 no-gutters gutter-left-sm"> ... </div> <div class="col-xs-12 col-sm-4 no-gutters-sm gutters-lg"> ... </div> <div class="col-xs-12 col-sm-4 no-gutter-left-sm"> ... </div> </div>
Col Fillers are similar to containers but they have 2 grid cols outside content. This allow to you, set different colors in each outside column.
There are 3 predefined content sizes:
You can create own:
.grid-filler-1500 { @supports (display: grid) { grid-template-columns: auto minmax(0, 1500px) auto; } .grid-filler-container { max-width: 1500px; } } /* OR use mixin */ @include make-grid-filler-size(1500);
<div class="grid-filler grid-filler-1140"> <div class="grid-col-filler grid-left-filler"></div> <div class="grid-filler-container"> <div class="grid-row"> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div> ... </div> <div class="grid-col-filler grid-right-filler"></div> </div>
<div class="grid-row"> <div class="col-xs-12 col-sm-2 hidden-xs hidden-sm"> A </div> <div class="col-xs-12 col-sm-3 visible-lg"> B </div> <div class="col-xs-12 col-sm-3 hidden-lg"> C </div> <div class="col-xs-12 col-sm-2"> D </div> <div class="col-xs-12 col-sm-2"> E </div> </div>
<div class="responsive-embed-wrapper"> <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/l69Uz1vYbNU" frameborder="0" allow="accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div>