Grid-Scheibo

A Simple SCSS Grid
Based on CSS-Grid or Flexbox

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

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/12@tablet

1/2,1/6@tablet

1/2,1/12@tablet

1/2,1/6@tablet

1/2,1/12@tablet

1/2,1/6@tablet

1/2,1/12@tablet

1/2,1/6@tablet

Install

npm i grid-scheibo

Usage

// Grid with CSS Grid
@use '../node_modules/grid-scheibo/source/variables';
@use '../node_modules/grid-scheibo/source/cssgrid-scheibo';

// Grid with Flexbox
@use '../node_modules/grid-scheibo/source/variables';
@use '../node_modules/grid-scheibo/source/grid-scheibo';

// Order for Grid
@use '../node_modules/grid-scheibo/source/variables';
@use '../node_modules/grid-scheibo/source/grid-order-scheibo';

// Align content for Flexbox
@use '../node_modules/grid-scheibo/source/variables';
@use '../node_modules/grid-scheibo/source/grid-align-content-scheibo';

Advanced Usage

Insert your settings before the import

// include the variables and mixins from CSS-Scheibo
@use '../../../node_modules/grid-scheibo/source/variables' as *;
@use '../../../node_modules/grid-scheibo/source/mixins' as gridmixins;

// add own gutter size
$col-gutter-size: 2rem;

// your grid with CSS-Grid
$grid-setup: (
'12cols': 'repeat(12, 1fr)',
'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
.o-grid {
  @include gridmixins.css-grid-scheibo($col-gutter-size, $grid-setup, $col-grid-breaks);
}

// for using Flexbox
.o-row {
  @include gridmixins.grid-scheibo(variables.$col-gutter-size, variables.$col-widths, variables.$col-grid-breaks);
}

Personalize

Set your own classname

// include the variables and mixins from CSS-Scheibo
@use '../../../node_modules/grid-scheibo/source/variables' as *;
@use '../../../node_modules/grid-scheibo/source/mixins' as gridmixins;

// set your own classname for css-grid
.yourownclassname {
  @include gridmixins.css-grid-scheibo($col-gutter-size, $grid-setup, $col-grid-breaks);
}

// set your own classname for css-grid without offset
.yourownclassname {
  @include gridmixins.css-grid-scheibo-base($col-gutter-size, $grid-setup, $col-grid-breaks);
}

// set your own classname for flexbox-grid
.yourownclassname {
  @include gridmixins.grid-scheibo($col-gutter-size, $col-widths, $col-grid-breaks);
}

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

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

<!-- 12 Column Grid with offset and order -->
<div class="o-grid o-grid-1-1-1@tablet o-grid-12cols@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</div>
  <div>Your Content</div>
  <div>Your Content</div>
  <div>Your Content</div>
  <div class="o-grid__col-9@desktop">Your Content</div>
  <div class="o-grid__col-4@desktop">Your Content</div>
  <div class="o-grid__col-6@desktop">Your Content</div>
  <div class="o-grid__col-4@desktop">Your Content</div>
  <div class="o-grid__col-4@desktop o-grid__col-start-9@desktop">Your Content</div>
  <div class="o-grid__col-3@desktop o-grid__col-start-3@desktop">Your Content</div>
  <div class="o-grid__col-3@desktop o-grid__col-start-10@desktop">Your Content</div>
  <div class="o-grid__col-6@desktop o-grid__col-start-4@desktop">Your Content</div>
  <div class="o-grid__col-4@desktop">First, but unordered</div>
  <div class="o-grid__col-4@desktop o-order--2@desktop">Third, but first</div>
  <div class="o-grid__col-4@desktop o-order--1@desktop">Second, but last</div>
</div>

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

o-grid__col-9@desktop

o-grid__col-4@desktop

o-grid__col-6@desktop

o-grid__col-4@desktop

o-grid__col-4@desktop o-grid__col-start-9@desktop

o-grid__col-3@desktop o-grid__col-start-3@desktop

o-grid__col-3@desktop o-grid__col-start-10@desktop

o-grid__col-6@desktop o-grid__col-start-4@desktop

First, but unordered

Second, but last

Third, but first

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,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 class="o-row__col-1/2 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

1/2,1/3@tablet,1/4@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 class="o-row__col-1/2 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

1/2,1/3@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-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,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-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

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