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

Author: ssvocus

README.md

@@ -8,9 +8,10 @@ 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
+- `colwidth` for applying min width for the auto-grid
 - `gaps`, for specifying the gap sizes you'd like to generate
 - `variants`, for specifying which variants to generate
 
@@ -22,6 +23,7 @@ module.exports = {
     // ...
     require('./plugins/css-grid')({
       grids: [2, 3, 5, 6, 8, 10, 12],
+      colwidth: [5, 10, 15, 20], // in REM
       gaps: {
         0: '0',
         4: '1rem',
@@ -39,6 +41,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
+- `.auto-grid-{size}`, for specifying the minimum width of the columns generated with auto-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
 - `.col-start-{line}` and `.col-end-{line}`, for specifying a cell's start and end points explicitly (useful for reordering cells or leaving gaps)

index.js

@@ -1,6 +1,6 @@
 const _ = require('lodash')
 
-module.exports = function ({ grids = _.range(1, 12), gaps = {}, variants = ['responsive']}) {
+module.exports = function ({ grids = _.range(1, 12), gaps = {}, colwidth = {}, variants = ['responsive']}) {
   return function ({ e, addUtilities }) {
     addUtilities([
       { '.grid': { display: 'grid' } },
@@ -13,6 +13,11 @@ module.exports = function ({ grids = _.range(1, 12), gaps = {}, variants = ['res
           gridTemplateColumns: `repeat(${columns}, 1fr)`,
         }
       })),
+      ...colwidth.map(gridwidth => ({
+        [`.auto-grid-${gridwidth}`]: {
+          gridTemplateColumns: `repeat(auto-fit, minmax(${gridwidth}rem, 1fr))`,
+        }
+      })),
       ..._.range(1, _.max(grids) + 1).map(span => ({
         [`.col-span-${span}`]: {
           gridColumnStart: `span ${span}`,