Added ability to use different values for maxWidth and gutter

README.md

@@ -123,3 +123,8 @@ Turns into:
   margin-left: 2.08333%;
 }
 ```
+### Change maxWidth and gutter on the fly
+
+You can pass to `grid-column`, `grid-push`, `grid-pull` next format of data `1/16/1170/30`.
+Where first two params are the same as described before, but second two params is maxWidth of container and gutter.
+It is needed if your mockup has different grid in different responsive layers.

index.js

@@ -17,13 +17,25 @@ module.exports = postcss.plugin('postcss-grid', function (opts) {
 		var container = cols * columnWidth + (cols -1) * opts.gutter;
 		return ((width  / container) * 100).toFixed(5) * 1;
 	};
+	var gridWidthExtended = function (span, cols, maxWidth, gutter) {
+		var colWidth = (maxWidth - ((cols -1 ) * gutter)) / cols;
+		var width = span * colWidth + (span -1 ) * gutter;
+		var container = cols * colWidth + (cols -1) * gutter;
+		return ((width  / container) * 100).toFixed(5) * 1;
+	};
 
 	var gutterWidth = function (cols) {
 		var width = cols * columnWidth + (cols - 1) * opts.gutter;
 		return ((opts.gutter / width) * 100).toFixed(5) * 1;
 	};
+	var gutterWidthExtended = function (cols, maxWidth, gutter) {
+		var colWidth = (maxWidth - ((cols -1 ) * gutter)) / cols;
+		var width = cols * colWidth + (cols - 1) * gutter;
+		return ((gutter / width) * 100).toFixed(5) * 1;
+	};
 
 	var value = /\s*(\d+)\s*\/\s*(\d+)\s*/;
+	var extended = /\s*(\d+)\s*\/\s*(\d+)\s*\/\s*(\d+)\s*\/\s*(\d+)\s*/;
 	var isLast = /\s*!last\s*$/;
 
 	return function (css) {
@@ -51,6 +63,19 @@ module.exports = postcss.plugin('postcss-grid', function (opts) {
 			if (decl.prop === 'grid-column') {
 				var match;
 
+				if (match = extended.exec(decl.value)) {
+					var span = match[1];
+					var columns = match[2];
+					var maxWidth = match[3];
+					var gutter = match[4];
+					decl.parent.append({prop: 'float', value: 'left'}).source = decl.source;
+					decl.parent.append({prop: 'width', value: gridWidthExtended(span, columns, maxWidth, gutter) + '%'}).source = decl.source;
+					if (!(decl.value.match(isLast))) {
+						if (opts.legacy) decl.parent.append({prop: 'display', value: 'inline'}).source = decl.source;
+						decl.parent.append({prop: 'margin-right', value: gutterWidthExtended(columns, maxWidth, gutter) + '%'}).source = decl.source;
+					}
+					return decl.remove();
+				}
 				if (match = value.exec(decl.value)) {
 					var span = match[1];
 					var columns = match[2];
@@ -70,7 +95,18 @@ module.exports = postcss.plugin('postcss-grid', function (opts) {
 			}
 			if (decl.prop === 'grid-push' || decl.prop === 'grid-pull') {
 				var match;
-
+				if (match = extended.exec(decl.value)) {
+					var span = match[1];
+					var columns = match[2];
+					var maxWidth = match[3];
+					var gutter = match[4];
+					var width = span * gridWidthExtended(1, columns, maxWidth, gutter) + span * gutterWidthExtended(columns, maxWidth, gutter);
+					decl.parent.append({
+						prop: decl.prop === 'grid-push' ? 'margin-left' : 'margin-right',
+						value: width + '%'
+					}).source = decl.source;
+					return decl.remove();
+				}
 				if (match = value.exec(decl.value)) {
 					var span = match[1];
 					var columns = match[2];