1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
1/2@tablet,1/5@desktop
1/2@tablet,1/5@desktop
1/3@tablet,1/5@desktop
1/3@tablet,1/5@desktop
1/3@tablet,1/5@desktop
3/4@tablet
1/4@tablet
1/4@tablet
3/4@tablet
2/5@tablet
3/5@tablet
3/5@tablet
2/5@tablet
1/2@400,full@desktop
1/2@400,full@desktop
1/3@400,1/6@desktop
1/3@400,1/6@desktop
1/3@400,1/6@desktop
1/3@400,1/6@desktop
1/3@400,1/6@desktop
1/3@400,1/6@desktop
npm i grid-scheibo// Grid with CSS Grid
@import
'../node_modules/grid-scheibo/source/variables',
'../node_modules/grid-scheibo/source/cssgrid-scheibo';
// Grid with Flexbox
@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';<!-- o-row--nogutter -->
<div class="o-grid o-grid--nogutter@tablet o-grid--gutter@desktop 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>Your Content
Your Content
Your Content
Your Content
Your Content
Your Content
Your Content
Your Content
Your Content
<!-- o-row--nogutter -->
<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>1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
<!-- o-row--gutter (with negative margin) -->
<div class="o-row o-row--gutter">
<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>full,1/3@tablet,1/4@desktop
full,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/2@desktop
<!-- o-row--gutter (with negative margin) & o-row--vertical-align -->
<div class="o-row o-row--gutter 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>full,1/3@tablet,1/4@desktop
full,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/2@desktop
<!-- o-row--between -->
<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>1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
<!-- 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>full,1/3@tablet,1/4@desktop
full,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,full@tablet,1/4@desktop
1/2,1/3@tablet,1/4@desktop
1/2,1/3@tablet,1/2@desktop
full,1/3@tablet,1/4@desktop
<!-- o-row--row-reverse -->
<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>Column 1
Column 2
Column 3
Column 4