diff --git a/README.md b/README.md index 43fb907..27ec682 100644 --- a/README.md +++ b/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. \ No newline at end of file +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. \ No newline at end of file diff --git a/index.js b/index.js index 4d585f5..fcf6dd3 100644 --- a/index.js +++ b/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) } } diff --git a/package.json b/package.json index a8cf880..99ee081 100644 --- a/package.json +++ b/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": {