Layout system changed to grid from flexbox

Author: UnderlineWords

README.md

@@ -1,8 +1,17 @@
 # Grider
-***Grider*** is a simple enough and fully customizable SCSS-based grid generator. Create your own responsive CSS grid system easily with offset and equal height features.
+***Grider*** is a simple enough and fully customizable SCSS Grid-based layout generator. Create your own responsive CSS layout system easily with offset and equal height features.
 
 [![GitHub license](https://img.shields.io/github/license/codeforms/Grider)](https://github.com/codeforms/Grider/blob/master/LICENSE)
 ![GitHub release (latest by date)](https://img.shields.io/github/v/release/codeforms/Grider)
 [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](https://github.com/codeforms/Grider/releases)
 
-[Live Demo](https://codepen.io/underlinewords/pen/pogooob)
+### Features
+* Clean code
+* Simple enough (just compile)
+* Fully customizable (grid number, class names etc.)
+* CSS Grid based, not Flexbox!
+* Viewport breakpoints
+* Column offsets
+* Equal height columns
+
+[Take a Look](https://codepen.io/underlinewords/pen/pogooob)

grider.scss

@@ -4,36 +4,39 @@
 ||||||||||||||||
 */
 
-/*** BASIC ***/
-	$grid: 16;
+/******************** 
+BASIC ********************/
+$grid 					: 16;
+$gutter					: 30px;
 
-/*** NAMES ***/
-	$row-name: 'row';
-	$container-name: 'container';
-	$column-name: 'col';
-	$offset: 'offset';
-	$equal: 'equal';
+/******************** 
+NAMES ********************/
+$row-name				: 'row';
+$container-name			: 'container';
+$column-name			: 'column';
+$offset					: 'offset';
+//$equal				: 'equal';
 
-/*** CONTAINER ***/
-	$container-width: 97%;
-	$container-small-width: 92%;
-	$container-large-width: 88%;
+/******************** 
+COLUMN ********************/
+$column-padding			: .3rem;
+$column-min-height		: .125rem;
 
-/*** ROW ***/
-	$row-width: 100%;
+/******************** 
+BREAKPOINTS ********************/
+$screen_viewport_xs		: 0;
+$screen_viewport_sm		: 500px;
+$screen_viewport_md		: 768px;
+$screen_viewport_lg		: 992px;
+$screen_viewport_xl		: 1260px;
 
-/*** COLUMN ***/
-	$column-width: 100%;
-	$column-padding: 0;
-	$column-min-height: .125rem;
-
-/*** BREAKPOINTS ***/
-	$breakpoint-small: 33.75em; // 540px
-	$breakpoint-medium: 48em; // 768px
-	$breakpoint-large: 61.25em; // 980px
-
-/*** SPACER ***/
-	$spacer: 15px;
+$viewports: (
+	(xs, $screen_viewport_xs),
+	(sm, $screen_viewport_sm), 
+	(md, $screen_viewport_md), 
+	(lg, $screen_viewport_lg), 
+	(xl, $screen_viewport_xl)
+);
 
 /*** MIXINS ***/
 @mixin breakpoints($size) {
@@ -42,54 +45,34 @@
 	}
 }
 
-.#{$container-name} {
-	width: $container-width;
-	padding-right: $spacer;
-	padding-left: $spacer;
-	margin-left: auto;
-	margin-right: auto;
-	@include breakpoints($breakpoint-small) {
-		width: $container-small-width;
-	}
-	@include breakpoints($breakpoint-large) {
-		width: $container-large-width;
-	}
-}
 .#{$row-name} {
-	display: flex;
-	flex-wrap: wrap;
-	width: $row-width;
-	[class^="#{$column-name}"] {
-		float: left;
-		padding: $column-padding;
-		height: 100%;
-		min-height: $column-min-height;
-		flex-direction: column;
-	}
-	&.#{$equal} {
-		[class^="#{$column-name}"] {
-			height: auto;
-		}
-	}
-	@for $i from 1 through $grid {
-		.#{$column-name}-#{$i} {
-			flex-basis: $column-width; 
-		}
-		.#{$column-name}-#{$offset}-#{$i} {
-			margin-left: 0;
-			flex-basis: $column-width; 
-		}
-	}
-	@include breakpoints($breakpoint-medium) {
-		@for $i from 1 through $grid {
-			$value : (100 / ($grid / $i) ) * 1%;
-			.#{$column-name}-#{$i} { 
-				flex-basis: $value; 
+	display: grid;
+	grid-gap: $gutter;
+	grid-template-columns: repeat($grid, 1fr);
+}
+[class^="#{$column-name}"] {
+	height: auto;
+	padding: $column-padding;
+	min-height: $column-min-height;
+}
+@each $label, $breakpoint, $width in $viewports {
+	@include breakpoints($breakpoint) {
+	    @for $i from 1 through $grid {
+			.#{$column-name}-#{$i} {
+				grid-column: span #{$i};
+			}
+			@for $y from 1 through $grid {
+				.#{$offset}-#{$label}-#{$y}.#{$column-name}-#{$label}-#{$i} {
+					grid-column: #{$y} / span #{$i};
+				}
 			}
-			.#{$column-name}-#{$offset}-#{$i} {
-				flex-basis: $value;
-				margin-left: $value;
+			.#{$column-name}-#{$label}-#{$i} {
+				grid-column-start: span #{$i};
 			}
 		}
+		.#{$container-name} {
+			width: 95%;
+			margin: 0 auto;
+		}
 	}
 }