Merge pull request #4 from magicspon/master

adds the ability to set grid row/column gap

Author: chrisrowe

README.md

@@ -9,25 +9,27 @@
 
 ```js
 module.exports = {
-  // ...
-
-  plugins: [
-    // ...
-    require('tailwindcss-grid')({
-      grids: [2, 3, 5, 6, 8, 10, 12],
-      gaps: {
-        0: '0',
-        4: '1rem',
-        8: '2rem'
-      },
-      autoMinWidths: {
-        '16': '4rem',
-        '24': '6rem',
-        '300px': '300px'
-      },
-      variants: ['responsive'],
-    }),
-  ],
+	// ...
+
+	plugins: [
+		// ...
+		require('tailwindcss-grid')({
+			grids: [2, 3, 5, 6, 8, 10, 12],
+			gaps: {
+				0: '0',
+				4: '1rem',
+				8: '2rem',
+				'4-x': '1rem',
+				'4-y': '1rem'
+			},
+			autoMinWidths: {
+				'16': '4rem',
+				'24': '6rem',
+				'300px': '300px'
+			},
+			variants: ['responsive']
+		})
+	]
 }
 ```
 
@@ -40,7 +42,7 @@ 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
 - `.col-span-{columns}` for specifying how many columns a cell should span
-- `.grid-gap-{size}` for specifying the size of the gap between columns/rows
+- `.grid-gap-{size}` for specifying the size of the gap between columns/rows, if the name ends with -x or -y `grid-[column/row]-gap` will be used
 - `.grid-automin-{size}` for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr)
 - `.col-start-{line}` and `.col-end-{line}` for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps)
 - `.row-span-{columns}` for specifying how many rows a cell should span

index.js

@@ -1,54 +1,75 @@
 const _ = require('lodash')
 
-module.exports = function ({
+module.exports = function({
   grids = _.range(1, 12),
   gaps = {},
   autoMinWidths = {},
-  variants = ['responsive']
+  variants = ['responsive'],
 }) {
-  return function ({ e, addUtilities }) {
-    addUtilities([
-      { '.grid': { display: 'grid' } },
-      { '.grid-dense': { gridAutoFlow: 'dense' } },
-      ..._.map(gaps, (size, name) => ({
-        [`.${e(`grid-gap-${name}`)}`]: { gridGap: size },
-      })),
-      ...grids.map(columns => ({
-        [`.grid-columns-${columns}`]: {
-          gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        }
-      })),
-      ..._.map(autoMinWidths, (size, name) => ({
-        [`.${e(`grid-automin-${name}`)}`]: {
-          gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`
+  return function({ e, addUtilities }) {
+    addUtilities(
+      [
+        {
+          '.grid': {
+            display: 'grid',
+          },
         },
-      })),
-      ..._.range(1, _.max(grids) + 1).map(span => ({
-        [`.col-span-${span}`]: {
-          gridColumnStart: `span ${span}`,
-        }
-      })),
-      ..._.range(1, _.max(grids) + 2).map(line => ({
-        [`.col-start-${line}`]: {
-          gridColumnStart: `${line}`,
+        {
+          '.grid-dense': {
+            gridAutoFlow: 'dense',
+          },
         },
-        [`.col-end-${line}`]: {
-          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)
+        ..._.map(gaps, (size, name) => {
+          const gridGap = name.endsWith('-y')
+            ? 'gridRowGap'
+            : name.endsWith('-x')
+            ? 'gridColumnGap'
+            : 'gridGap'
+
+          return {
+            [`.${e(`grid-gap-${name}`)}`]: {
+              [gridGap]: size,
+            },
+          }
+        }),
+        ...grids.map(columns => ({
+          [`.grid-columns-${columns}`]: {
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          },
+        })),
+        ..._.map(autoMinWidths, (size, name) => ({
+          [`.${e(`grid-automin-${name}`)}`]: {
+            gridTemplateColumns: `repeat(auto-fit, minmax(${size}, 1fr))`,
+          },
+        })),
+        ..._.range(1, _.max(grids) + 1).map(span => ({
+          [`.col-span-${span}`]: {
+            gridColumnStart: `span ${span}`,
+          },
+        })),
+        ..._.range(1, _.max(grids) + 2).map(line => ({
+          [`.col-start-${line}`]: {
+            gridColumnStart: `${line}`,
+          },
+          [`.col-end-${line}`]: {
+            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,
+    )
   }
 }