Demo (https://scheibome.github.io/grid-scheibo/)
npm install grid-scheibo
@import
'../../../node_modules/grid-scheibo/source/variables',
'../../../node_modules/grid-scheibo/source/cssgrid-scheibo';@import
'../../../node_modules/grid-scheibo/source/variables',
'../../../node_modules/grid-scheibo/source/grid-scheibo';Insert your settings before the import
// add own gutter size
$col-gutter-size: 2rem;
// your grid with CSS-Grid
$grid-setup: (
'1-1': '1fr 1fr',
'1-1-1': '1fr 1fr 1fr',
'1-2-1': '1fr 2fr'
);
// your grid with flexbox
$col-widths: (
'1\\/8': '1/8',
'2\\/8': '2/8',
'3\\/8': '3/8',
'4\\/8': '4/8',
'5\\/8': '5/8',
'6\\/8': '6/8',
'7\\/8': '7/8',
'full': 100%
);
// your breaks
$col-grid-breaks: (
tablet: '900px',
desktop: '1024px',
wide: '1400px'
);
// for using CSS-Grid
@import '../../../node_modules/grid-scheibo/source/cssgrid-scheibo';
// for using Flexbox
@import '../../../node_modules/grid-scheibo/source/grid-scheibo';<div class="o-grid o-grid-1-1 o-grid-1-1-1@tablet o-grid-1-2-1@desktop">
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
</div><div class="o-row o-row--nogutter">
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-full@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-full@tablet o-row__col-1/4@desktop">Your Content</div>
</div><div class="o-row o-row--between">
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-full@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-full@tablet o-row__col-1/4@desktop">Your Content</div>
</div><!-- o-row--between & o-row--vertical-align -->
<div class="o-row o-row--between o-row--vertical-align">
<div class="o-row__col-full o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-full o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-full@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet o-row__col-1/2@desktop">Your Content</div>
<div class="o-row__col-full o-row__col-1/3@tablet o-row__col-1/4@desktop">Your Content</div>
</div><div class="o-row o-row--between o-row--vertical-align o-row--row-reverse@desktop">
<div class="o-row__col-full o-row__col-1/3@tablet">Column 1</div>
<div class="o-row__col-full o-row__col-1/3@tablet">Column 2</div>
<div class="o-row__col-1/2 o-row__col-1/3@tablet">Column 3</div>
<div class="o-row__col-1/2 o-row__col-full@tablet">Column 4</div>
</div>
