Merge pull request #3 from saidsl/master

Added auto-grid function with ability to specify the minimum width of…

Author: chrisrowe

README.md

@@ -8,10 +8,11 @@ In `plugins/css-grid/index.js` you'll find an example of a plugin that adds new
 
 ![](https://user-images.githubusercontent.com/4323180/37525015-fb5c78f2-2901-11e8-97be-18c66d12bf84.png)
 
-It exposes three configuration options:
+It exposes four configuration options:
 
 - `grids`, for specifying all of the grid sizes you'd like to generate
 - `gaps`, for specifying the gap sizes you'd like to generate
+- `autoMinWidths` for specifying min width to columns using auto-fit and minmax
 - `variants`, for specifying which variants to generate
 
 ```js
@@ -27,6 +28,11 @@ module.exports = {
         4: '1rem',
         8: '2rem',
       },
+      autoMinWidths: {
+        '16': '4rem',
+        '24': '6rem',
+        '300px': '300px'
+      },
       variants: ['responsive'],
     }),
   ],
@@ -39,10 +45,12 @@ 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 cell should be
+- `.grid-gap-{size}`, for specifying the size of the gap between columns/rows
+- `.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 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)
+- `.grid-dense` applies `grid-auto-flow: dense`
 
 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

@@ -1,6 +1,11 @@
 const _ = require('lodash')
 
-module.exports = function ({ grids = _.range(1, 12), gaps = {}, variants = ['responsive']}) {
+module.exports = function ({
+  grids = _.range(1, 12),
+  gaps = {},
+  autoMinWidths = {},
+  variants = ['responsive']
+}) {
   return function ({ e, addUtilities }) {
     addUtilities([
       { '.grid': { display: 'grid' } },
@@ -13,6 +18,11 @@ module.exports = function ({ grids = _.range(1, 12), gaps = {}, variants = ['res
           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}`,

package.json

@@ -25,4 +25,4 @@
   "devDependencies": {
     "lodash": "^4.17.5"
   }
-}
+}