Grid-Scheibo - A Simple SCSS Grid Based on CSS-Grid or Flexbox

1/2,1/3@tablet,1/4@desktop

1/2,full@tablet,1/4@desktop

1/2@tablet,1/5@desktop

1/3@tablet,1/5@desktop

3/4@tablet

1/4@tablet

3/4@tablet

2/5@tablet

3/5@tablet

2/5@tablet

1/2@400,full@desktop

1/3@400,1/6@desktop

Install

npm i grid-scheibo

Usage

// 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';

Advanced Usage

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';

Examples - Grid with CSS-Grid

<!-- 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

Examples - Grid with Flexbox

<!-- 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,full@tablet,1/4@desktop

1/2,1/3@tablet,1/4@desktop

1/2,full@tablet,1/4@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,full@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

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

Demoboxes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Non est igitur voluptas bonum. Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Duo Reges: constructio interrete. Ubi ut eam caperet aut quando? Naturales divitias dixit parabiles esse, quod parvo esset natura contenta.