https://github.com/scheibome/grid-scheibo

A Simple SCSS Grid Based on CSS-Grid or Flexbox
https://github.com/scheibome/grid-scheibo

css-grid flexbox grid

Last synced: 6 months ago
JSON representation

A Simple SCSS Grid Based on CSS-Grid or Flexbox

• Host: GitHub
• URL: https://github.com/scheibome/grid-scheibo
• Owner: scheibome
• License: mit
• Created: 2020-03-23T21:38:31.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-11-12T09:43:21.000Z (over 1 year ago)
• Last Synced: 2025-10-04T12:49:54.139Z (10 months ago)
• Topics: css-grid, flexbox, grid
• Language: Pug
• Homepage: https://grid.scheibitz.com/
• Size: 415 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Grid-Scheibo - A Simple SCSS Grid Based on Flexbox

[![npm version](https://badge.fury.io/js/grid-scheibo.svg?style=flat)](https://npmjs.org/package/grid-scheibo)

 [![Issues](https://img.shields.io/github/issues/scheibome/grid-scheibo.svg)]( https://github.com/scheibome/grid-scheibo/issues) ![npm](https://img.shields.io/npm/dt/grid-scheibo.svg)

![npm](https://img.shields.io/npm/l/grid-scheibo.svg)

Demo (https://scheibome.github.io/grid-scheibo/)

## Install

~~~

npm install grid-scheibo

~~~

---

## Usage

#### Grid with CSS Grid

~~~scss

@import

'../../../node_modules/grid-scheibo/source/variables',

'../../../node_modules/grid-scheibo/source/cssgrid-scheibo';

~~~

#### Grid with Flexbox

~~~scss

@import

'../../../node_modules/grid-scheibo/source/variables',

'../../../node_modules/grid-scheibo/source/grid-scheibo';

~~~

---

## Advanced Usage

Insert your settings before the import

~~~scss

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

~~~html



  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content



~~~


#### Grid with Flexbox

#####  o-row--nogutter

~~~html



  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content



~~~


##### o-row--between

~~~html



  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content



~~~


##### o-row--between & o-row--vertical-align

~~~html



  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content

  
Your Content



~~~


##### o-row--row-reverse

~~~html



  
Column 1

  
Column 2

  
Column 3

  
Column 4



~~~