Add new utilities for grid-auto-columns and grid-auto-rows (#2531)

* Add grid-auto-columns/rows utilities * Add responsive variants for auto-cols/rows utilities * Update changelog
2020-10-09 13:11:57 -04:00 · 2020-10-09 13:11:57 -04:00 · 69845d6f4f
commit 69845d6f4f
parent 0feb064054
9 changed files with 716 additions and 0 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add additional small `rotate` and `skew` values ([#2528](https://github.com/tailwindlabs/tailwindcss/pull/2528))
 - Add `xl`, `2xl`, and `3xl` border radius values ([#2529](https://github.com/tailwindlabs/tailwindcss/pull/2529))
 - Support disabling dark mode variants globally ([#2530](https://github.com/tailwindlabs/tailwindcss/pull/2530))
+- Add new utilities for `grid-auto-columns` and `grid-auto-rows` ([#2531](https://github.com/tailwindlabs/tailwindcss/pull/2531))

 ## [1.8.12] - 2020-10-07

--- a/tests/fixtures/tailwind-output-flagged.css
+++ b/tests/fixtures/tailwind-output-flagged.css
@ -40116,6 +40116,22 @@ video {
  grid-template-columns: none;
 }

+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.auto-cols-min {
+  grid-auto-columns: min-content;
+}
+
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+
+.auto-cols-fr {
+  grid-auto-columns: minmax(0, 1fr);
+}
+
 .col-auto {
  grid-column: auto;
 }
@ -40312,6 +40328,22 @@ video {
  grid-template-rows: none;
 }

+.auto-rows-auto {
+  grid-auto-rows: auto;
+}
+
+.auto-rows-min {
+  grid-auto-rows: min-content;
+}
+
+.auto-rows-max {
+  grid-auto-rows: max-content;
+}
+
+.auto-rows-fr {
+  grid-auto-rows: minmax(0, 1fr);
+}
+
 .row-auto {
  grid-row: auto;
 }
@ -84069,6 +84101,22 @@ video {
    grid-template-columns: none;
  }

+  .sm\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .sm\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .sm\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .sm\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .sm\:col-auto {
    grid-column: auto;
  }
@ -84265,6 +84313,22 @@ video {
    grid-template-rows: none;
  }

+  .sm\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .sm\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .sm\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .sm\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .sm\:row-auto {
    grid-row: auto;
  }
@ -127992,6 +128056,22 @@ video {
    grid-template-columns: none;
  }

+  .md\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .md\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .md\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .md\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .md\:col-auto {
    grid-column: auto;
  }
@ -128188,6 +128268,22 @@ video {
    grid-template-rows: none;
  }

+  .md\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .md\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .md\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .md\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .md\:row-auto {
    grid-row: auto;
  }
@ -171915,6 +172011,22 @@ video {
    grid-template-columns: none;
  }

+  .lg\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .lg\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .lg\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .lg\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .lg\:col-auto {
    grid-column: auto;
  }
@ -172111,6 +172223,22 @@ video {
    grid-template-rows: none;
  }

+  .lg\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .lg\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .lg\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .lg\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .lg\:row-auto {
    grid-row: auto;
  }
@ -215838,6 +215966,22 @@ video {
    grid-template-columns: none;
  }

+  .xl\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .xl\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .xl\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .xl\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .xl\:col-auto {
    grid-column: auto;
  }
@ -216034,6 +216178,22 @@ video {
    grid-template-rows: none;
  }

+  .xl\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .xl\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .xl\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .xl\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .xl\:row-auto {
    grid-row: auto;
  }
@ -259761,6 +259921,22 @@ video {
    grid-template-columns: none;
  }

+  .\32xl\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .\32xl\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .\32xl\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .\32xl\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .\32xl\:col-auto {
    grid-column: auto;
  }
@ -259957,6 +260133,22 @@ video {
    grid-template-rows: none;
  }

+  .\32xl\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .\32xl\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .\32xl\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .\32xl\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .\32xl\:row-auto {
    grid-row: auto;
  }
--- a/tests/fixtures/tailwind-output-important.css
+++ b/tests/fixtures/tailwind-output-important.css
@ -16816,6 +16816,22 @@ video {
  grid-template-columns: none !important;
 }

+.auto-cols-auto {
+  grid-auto-columns: auto !important;
+}
+
+.auto-cols-min {
+  grid-auto-columns: min-content !important;
+}
+
+.auto-cols-max {
+  grid-auto-columns: max-content !important;
+}
+
+.auto-cols-fr {
+  grid-auto-columns: minmax(0, 1fr) !important;
+}
+
 .col-auto {
  grid-column: auto !important;
 }
@ -17012,6 +17028,22 @@ video {
  grid-template-rows: none !important;
 }

+.auto-rows-auto {
+  grid-auto-rows: auto !important;
+}
+
+.auto-rows-min {
+  grid-auto-rows: min-content !important;
+}
+
+.auto-rows-max {
+  grid-auto-rows: max-content !important;
+}
+
+.auto-rows-fr {
+  grid-auto-rows: minmax(0, 1fr) !important;
+}
+
 .row-auto {
  grid-row: auto !important;
 }
@ -35405,6 +35437,22 @@ video {
    grid-template-columns: none !important;
  }

+  .sm\:auto-cols-auto {
+    grid-auto-columns: auto !important;
+  }
+
+  .sm\:auto-cols-min {
+    grid-auto-columns: min-content !important;
+  }
+
+  .sm\:auto-cols-max {
+    grid-auto-columns: max-content !important;
+  }
+
+  .sm\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr) !important;
+  }
+
  .sm\:col-auto {
    grid-column: auto !important;
  }
@ -35601,6 +35649,22 @@ video {
    grid-template-rows: none !important;
  }

+  .sm\:auto-rows-auto {
+    grid-auto-rows: auto !important;
+  }
+
+  .sm\:auto-rows-min {
+    grid-auto-rows: min-content !important;
+  }
+
+  .sm\:auto-rows-max {
+    grid-auto-rows: max-content !important;
+  }
+
+  .sm\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr) !important;
+  }
+
  .sm\:row-auto {
    grid-row: auto !important;
  }
@ -53964,6 +54028,22 @@ video {
    grid-template-columns: none !important;
  }

+  .md\:auto-cols-auto {
+    grid-auto-columns: auto !important;
+  }
+
+  .md\:auto-cols-min {
+    grid-auto-columns: min-content !important;
+  }
+
+  .md\:auto-cols-max {
+    grid-auto-columns: max-content !important;
+  }
+
+  .md\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr) !important;
+  }
+
  .md\:col-auto {
    grid-column: auto !important;
  }
@ -54160,6 +54240,22 @@ video {
    grid-template-rows: none !important;
  }

+  .md\:auto-rows-auto {
+    grid-auto-rows: auto !important;
+  }
+
+  .md\:auto-rows-min {
+    grid-auto-rows: min-content !important;
+  }
+
+  .md\:auto-rows-max {
+    grid-auto-rows: max-content !important;
+  }
+
+  .md\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr) !important;
+  }
+
  .md\:row-auto {
    grid-row: auto !important;
  }
@ -72523,6 +72619,22 @@ video {
    grid-template-columns: none !important;
  }

+  .lg\:auto-cols-auto {
+    grid-auto-columns: auto !important;
+  }
+
+  .lg\:auto-cols-min {
+    grid-auto-columns: min-content !important;
+  }
+
+  .lg\:auto-cols-max {
+    grid-auto-columns: max-content !important;
+  }
+
+  .lg\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr) !important;
+  }
+
  .lg\:col-auto {
    grid-column: auto !important;
  }
@ -72719,6 +72831,22 @@ video {
    grid-template-rows: none !important;
  }

+  .lg\:auto-rows-auto {
+    grid-auto-rows: auto !important;
+  }
+
+  .lg\:auto-rows-min {
+    grid-auto-rows: min-content !important;
+  }
+
+  .lg\:auto-rows-max {
+    grid-auto-rows: max-content !important;
+  }
+
+  .lg\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr) !important;
+  }
+
  .lg\:row-auto {
    grid-row: auto !important;
  }
@ -91082,6 +91210,22 @@ video {
    grid-template-columns: none !important;
  }

+  .xl\:auto-cols-auto {
+    grid-auto-columns: auto !important;
+  }
+
+  .xl\:auto-cols-min {
+    grid-auto-columns: min-content !important;
+  }
+
+  .xl\:auto-cols-max {
+    grid-auto-columns: max-content !important;
+  }
+
+  .xl\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr) !important;
+  }
+
  .xl\:col-auto {
    grid-column: auto !important;
  }
@ -91278,6 +91422,22 @@ video {
    grid-template-rows: none !important;
  }

+  .xl\:auto-rows-auto {
+    grid-auto-rows: auto !important;
+  }
+
+  .xl\:auto-rows-min {
+    grid-auto-rows: min-content !important;
+  }
+
+  .xl\:auto-rows-max {
+    grid-auto-rows: max-content !important;
+  }
+
+  .xl\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr) !important;
+  }
+
  .xl\:row-auto {
    grid-row: auto !important;
  }
--- a/tests/fixtures/tailwind-output-no-color-opacity.css
+++ b/tests/fixtures/tailwind-output-no-color-opacity.css
@ -14368,6 +14368,22 @@ video {
  grid-template-columns: none;
 }

+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.auto-cols-min {
+  grid-auto-columns: min-content;
+}
+
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+
+.auto-cols-fr {
+  grid-auto-columns: minmax(0, 1fr);
+}
+
 .col-auto {
  grid-column: auto;
 }
@ -14564,6 +14580,22 @@ video {
  grid-template-rows: none;
 }

+.auto-rows-auto {
+  grid-auto-rows: auto;
+}
+
+.auto-rows-min {
+  grid-auto-rows: min-content;
+}
+
+.auto-rows-max {
+  grid-auto-rows: max-content;
+}
+
+.auto-rows-fr {
+  grid-auto-rows: minmax(0, 1fr);
+}
+
 .row-auto {
  grid-row: auto;
 }
@ -30509,6 +30541,22 @@ video {
    grid-template-columns: none;
  }

+  .sm\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .sm\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .sm\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .sm\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .sm\:col-auto {
    grid-column: auto;
  }
@ -30705,6 +30753,22 @@ video {
    grid-template-rows: none;
  }

+  .sm\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .sm\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .sm\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .sm\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .sm\:row-auto {
    grid-row: auto;
  }
@ -46620,6 +46684,22 @@ video {
    grid-template-columns: none;
  }

+  .md\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .md\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .md\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .md\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .md\:col-auto {
    grid-column: auto;
  }
@ -46816,6 +46896,22 @@ video {
    grid-template-rows: none;
  }

+  .md\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .md\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .md\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .md\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .md\:row-auto {
    grid-row: auto;
  }
@ -62731,6 +62827,22 @@ video {
    grid-template-columns: none;
  }

+  .lg\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .lg\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .lg\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .lg\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .lg\:col-auto {
    grid-column: auto;
  }
@ -62927,6 +63039,22 @@ video {
    grid-template-rows: none;
  }

+  .lg\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .lg\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .lg\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .lg\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .lg\:row-auto {
    grid-row: auto;
  }
@ -78842,6 +78970,22 @@ video {
    grid-template-columns: none;
  }

+  .xl\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .xl\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .xl\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .xl\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .xl\:col-auto {
    grid-column: auto;
  }
@ -79038,6 +79182,22 @@ video {
    grid-template-rows: none;
  }

+  .xl\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .xl\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .xl\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .xl\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .xl\:row-auto {
    grid-row: auto;
  }
--- a/tests/fixtures/tailwind-output.css
+++ b/tests/fixtures/tailwind-output.css
@ -16816,6 +16816,22 @@ video {
  grid-template-columns: none;
 }

+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.auto-cols-min {
+  grid-auto-columns: min-content;
+}
+
+.auto-cols-max {
+  grid-auto-columns: max-content;
+}
+
+.auto-cols-fr {
+  grid-auto-columns: minmax(0, 1fr);
+}
+
 .col-auto {
  grid-column: auto;
 }
@ -17012,6 +17028,22 @@ video {
  grid-template-rows: none;
 }

+.auto-rows-auto {
+  grid-auto-rows: auto;
+}
+
+.auto-rows-min {
+  grid-auto-rows: min-content;
+}
+
+.auto-rows-max {
+  grid-auto-rows: max-content;
+}
+
+.auto-rows-fr {
+  grid-auto-rows: minmax(0, 1fr);
+}
+
 .row-auto {
  grid-row: auto;
 }
@ -35405,6 +35437,22 @@ video {
    grid-template-columns: none;
  }

+  .sm\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .sm\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .sm\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .sm\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .sm\:col-auto {
    grid-column: auto;
  }
@ -35601,6 +35649,22 @@ video {
    grid-template-rows: none;
  }

+  .sm\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .sm\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .sm\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .sm\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .sm\:row-auto {
    grid-row: auto;
  }
@ -53964,6 +54028,22 @@ video {
    grid-template-columns: none;
  }

+  .md\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .md\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .md\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .md\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .md\:col-auto {
    grid-column: auto;
  }
@ -54160,6 +54240,22 @@ video {
    grid-template-rows: none;
  }

+  .md\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .md\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .md\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .md\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .md\:row-auto {
    grid-row: auto;
  }
@ -72523,6 +72619,22 @@ video {
    grid-template-columns: none;
  }

+  .lg\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .lg\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .lg\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .lg\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .lg\:col-auto {
    grid-column: auto;
  }
@ -72719,6 +72831,22 @@ video {
    grid-template-rows: none;
  }

+  .lg\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .lg\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .lg\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .lg\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .lg\:row-auto {
    grid-row: auto;
  }
@ -91082,6 +91210,22 @@ video {
    grid-template-columns: none;
  }

+  .xl\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .xl\:auto-cols-min {
+    grid-auto-columns: min-content;
+  }
+
+  .xl\:auto-cols-max {
+    grid-auto-columns: max-content;
+  }
+
+  .xl\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
  .xl\:col-auto {
    grid-column: auto;
  }
@ -91278,6 +91422,22 @@ video {
    grid-template-rows: none;
  }

+  .xl\:auto-rows-auto {
+    grid-auto-rows: auto;
+  }
+
+  .xl\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+
+  .xl\:auto-rows-max {
+    grid-auto-rows: max-content;
+  }
+
+  .xl\:auto-rows-fr {
+    grid-auto-rows: minmax(0, 1fr);
+  }
+
  .xl\:row-auto {
    grid-row: auto;
  }
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@ -86,10 +86,12 @@ import zIndex from './plugins/zIndex'
 import gap from './plugins/gap'
 import gridAutoFlow from './plugins/gridAutoFlow'
 import gridTemplateColumns from './plugins/gridTemplateColumns'
+import gridAutoColumns from './plugins/gridAutoColumns'
 import gridColumn from './plugins/gridColumn'
 import gridColumnStart from './plugins/gridColumnStart'
 import gridColumnEnd from './plugins/gridColumnEnd'
 import gridTemplateRows from './plugins/gridTemplateRows'
+import gridAutoRows from './plugins/gridAutoRows'
 import gridRow from './plugins/gridRow'
 import gridRowStart from './plugins/gridRowStart'
 import gridRowEnd from './plugins/gridRowEnd'
@ -206,10 +208,12 @@ export const corePluginList = {
  gap,
  gridAutoFlow,
  gridTemplateColumns,
+  gridAutoColumns,
  gridColumn,
  gridColumnStart,
  gridColumnEnd,
  gridTemplateRows,
+  gridAutoRows,
  gridRow,
  gridRowStart,
  gridRowEnd,
--- a/src/plugins/gridAutoColumns.js
+++ b/src/plugins/gridAutoColumns.js
@ -0,0 +1,14 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return function({ target, ...args }) {
+    if (target('gridAutoColumns') === 'ie11') {
+      return
+    }
+
+    createUtilityPlugin('gridAutoColumns', [['auto-cols', ['gridAutoColumns']]])({
+      target,
+      ...args,
+    })
+  }
+}
--- a/src/plugins/gridAutoRows.js
+++ b/src/plugins/gridAutoRows.js
@ -0,0 +1,11 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return function({ target, ...args }) {
+    if (target('gridAutoRows') === 'ie11') {
+      return
+    }
+
+    createUtilityPlugin('gridAutoRows', [['auto-rows', ['gridAutoRows']]])({ target, ...args })
+  }
+}
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@ -474,6 +474,12 @@ module.exports = {
      '11': 'repeat(11, minmax(0, 1fr))',
      '12': 'repeat(12, minmax(0, 1fr))',
    },
+    gridAutoColumns: {
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fr: 'minmax(0, 1fr)',
+    },
    gridColumn: {
      auto: 'auto',
      'span-1': 'span 1 / span 1',
@ -531,6 +537,12 @@ module.exports = {
      '5': 'repeat(5, minmax(0, 1fr))',
      '6': 'repeat(6, minmax(0, 1fr))',
    },
+    gridAutoRows: {
+      auto: 'auto',
+      min: 'min-content',
+      max: 'max-content',
+      fr: 'minmax(0, 1fr)',
+    },
    gridRow: {
      auto: 'auto',
      'span-1': 'span 1 / span 1',
@ -781,10 +793,12 @@ module.exports = {
    gap: ['responsive'],
    gridAutoFlow: ['responsive'],
    gridTemplateColumns: ['responsive'],
+    gridAutoColumns: ['responsive'],
    gridColumn: ['responsive'],
    gridColumnStart: ['responsive'],
    gridColumnEnd: ['responsive'],
    gridTemplateRows: ['responsive'],
+    gridAutoRows: ['responsive'],
    gridRow: ['responsive'],
    gridRowStart: ['responsive'],
    gridRowEnd: ['responsive'],