Adds support for grid-row span, start, end

Author: chrisrowe

README.md

@@ -40,7 +40,9 @@ The plugin generates the following sets of classes:
 - `.grid`, for setting `display: grid` on an element
 - `.grid-columns-{size}`, for specifying the number of columns in the grid
 - `.grid-gap-{size}`, for specifying the size of the gap between columns/rows
-- `.col-span-{columns}`, for specifying how wide a column should be
-- `.col-start-{line}` and `.col-end-{line}`, for specifying a column's start and end points explicitly (useful for reordering columns or leaving gaps)
+- `.col-span-{columns}`, for specifying how wide a cell should be
+- `.col-start-{line}` and `.col-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps)
+- `.row-span-{columns}`, for specifying how tall a cell should be
+- `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps)
 
-It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a column-only float or Flexbox grid.
+It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid.

index.js

@@ -26,6 +26,19 @@ module.exports = function ({ grids = _.range(1, 12), gaps = {}, variants = ['res
           gridColumnEnd: `${line}`,
         },
       })),
+      ..._.range(1, _.max(grids) + 1).map(span => ({
+        [`.row-span-${span}`]: {
+          gridRowStart: `span ${span}`,
+        }
+      })),
+      ..._.range(1, _.max(grids) + 2).map(line => ({
+        [`.row-start-${line}`]: {
+          gridRowStart: `${line}`,
+        },
+        [`.row-end-${line}`]: {
+          gridRowEnd: `${line}`,
+        },
+      })),
     ], variants)
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-grid",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "CSS grid plugin for tailwindcss framework",
   "main": "index.js",
   "scripts": {