diff --git a/README.md b/README.md
index 5d5a657..90a8905 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,74 @@
-# `styled-css-grid 🍱`
-
-[![Travis](https://img.shields.io/travis/azz/styled-css-grid.svg?style=flat-square)](https://travis-ci.org/azz/styled-css-grid)
-[![Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![npm](https://img.shields.io/npm/v/styled-css-grid.svg?style=flat-square)](https://npmjs.org/styled-css-grid)
-[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
-[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)
-[![JS.ORG](https://img.shields.io/badge/js.org-dns-ffb400.svg?style=flat-square)](http://js.org)
-
-> A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.
-
-## examples
-
-See the **[website]**.
-
-## installation
-
-Install React and [styled-components], then:
-
-```bash
-$ yarn add styled-css-grid
-```
-
-## usage
-
-```jsx
-import React from "react";
-import { Grid, Cell } from "styled-css-grid";
-
-const MyGrid = () => (
-  <Grid columns={2} gap="2px">
-    <Cell>foo</Cell>
-    <Cell height={2}>bar</Cell>
-    <Cell width={2}>baz</Cell>
-  </Grid>
-);
-```
-
-## api
-
-### `Cell`
-
-A cell. Not too much to say...
-
-Props:
-
-* `width`: Cell width in units, default is `1`.
-* `height`: Cell height in units, default is `1`.
-* `left`: The [grid-column-start] CSS property. Not provided by default.
-* `top`: The [grid-row-start] CSS property. Not provided by default.
-* `middle`: Vertically align the contents of the cell. Default is `false`.
-* `center`: Horizontally align the text contents of the cell. Default is `false`.
-
-### `Grid`
-
-Wrap your cells in `Grid`. Pretty simple.
-
-Props:
-
-* `columns`: Number of columns to draw, default is `12`.
-* `gap`: Gap between cells. Default is `"8px"`.
-* `minRowHeight`: Minimum height of each row. Default is `"20px"`.
-* `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
-
-[website]: https://styled-css-grid.js.org/
-[CSS grid]: https://mdn.io/CSS_Grid_Layout
-[styled-components]: https://github.com/styled-components/styled-components
-[grid-auto-flow]: https://mdn.io/grid-auto-flow
-[grid-row-start]: https://mdn.io/grid-row-start
-[grid-column-start]: https://mdn.io/grid-column-start
+# `styled-css-grid 🍱`
+
+[![Travis](https://img.shields.io/travis/azz/styled-css-grid.svg?style=flat-square)](https://travis-ci.org/azz/styled-css-grid)
+[![Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![npm](https://img.shields.io/npm/v/styled-css-grid.svg?style=flat-square)](https://npmjs.org/styled-css-grid)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)
+[![JS.ORG](https://img.shields.io/badge/js.org-dns-ffb400.svg?style=flat-square)](http://js.org)
+
+> A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.
+
+## examples
+
+See the **[website]**.
+
+## installation
+
+Install React and [styled-components], then:
+
+```bash
+$ yarn add styled-css-grid
+```
+
+## usage
+
+```jsx
+import React from "react";
+import { Grid, Cell } from "styled-css-grid";
+
+const MyGrid = () => (
+  <Grid columns={2} gap="2px">
+    <Cell>foo</Cell>
+    <Cell height={2}>bar</Cell>
+    <Cell width={2}>baz</Cell>
+  </Grid>
+);
+```
+
+## api
+
+### `Cell`
+
+A cell. Not too much to say...
+
+Props:
+
+* `width`: Cell width in units, default is `1`.
+* `height`: Cell height in units, default is `1`.
+* `left`: The [grid-column-start] CSS property. Not provided by default.
+* `top`: The [grid-row-start] CSS property. Not provided by default.
+* `middle`: Vertically align the contents of the cell. Default is `false`.
+* `center`: Horizontally align the text contents of the cell. Default is `false`.
+
+### `Grid`
+
+Wrap your cells in `Grid`. Pretty simple.
+
+Props:
+
+* `columns`: The [grid-template-columns] CSS property. When a number is passed
+  it is a shorthand to specify the number of columns. Default is `12`.
+* `gap`: Gap between cells. Default is `"8px"`.
+* `minRowHeight`: Minimum height of each row. Default is `"20px"`.
+* `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
+* `rows`: The [grid-template-rows] CSS property. Not provided by default.
+
+[website]: https://styled-css-grid.js.org/
+[CSS grid]: https://mdn.io/CSS_Grid_Layout
+[styled-components]: https://github.com/styled-components/styled-components
+[grid-auto-flow]: https://mdn.io/grid-auto-flow
+[grid-row-start]: https://mdn.io/grid-row-start
+[grid-column-start]: https://mdn.io/grid-column-start
+[grid-template-columns]: https://mdn.io/grid-template-columns
+[grid-template-rows]: https://mdn.io/grid-template-rows
diff --git a/lib/Cell.js b/lib/Cell.js
index 3f73176..f1f8c9a 100644
--- a/lib/Cell.js
+++ b/lib/Cell.js
@@ -1,25 +1,25 @@
-import styled from "styled-components";
-
-const Cell = styled.section`
-  height: 100%;
-  min-width: 0;
-  overflow: hidden;
-  align-content: space-around;
-  grid-column-end: ${({ width = 1 }) => `span ${width}`};
-  grid-row-end: ${({ height = 1 }) => `span ${height}`};
-
-  ${({ left }) => left && `grid-column-start: ${left}`};
-  ${({ top }) => top && `grid-row-start: ${top}`};
-
-  ${({ center = false }) => center && `text-align: center;`};
-
-  ${/* prettier-ignore */
-  ({ middle = false }) => middle && `
-    display: inline-flex;
-    flex-flow: column wrap;
-    justify-content: center;
-    justify-self: stretch;
-  `};
-`;
-
-export default Cell;
+import styled from "styled-components";
+
+const Cell = styled.section`
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+  align-content: space-around;
+  grid-column-end: ${({ width = 1 }) => `span ${width}`};
+  grid-row-end: ${({ height = 1 }) => `span ${height}`};
+
+  ${({ left }) => left && `grid-column-start: ${left}`};
+  ${({ top }) => top && `grid-row-start: ${top}`};
+
+  ${({ center = false }) => center && `text-align: center;`};
+
+  ${/* prettier-ignore */
+  ({ middle = false }) => middle && `
+    display: inline-flex;
+    flex-flow: column wrap;
+    justify-content: center;
+    justify-self: stretch;
+  `};
+`;
+
+export default Cell;
diff --git a/lib/Grid.js b/lib/Grid.js
index bb94e83..10ccd0c 100644
--- a/lib/Grid.js
+++ b/lib/Grid.js
@@ -1,21 +1,22 @@
-import styled from "styled-components";
-
-const minmax = ({ minRowHeight = "20px" }) => `minmax(${minRowHeight}, auto)`;
-
-const columnRepeat = ({ columns = 12 }) => `repeat(${columns}, 1fr)`;
-
-const gap = ({ gap = "8px" }) => `${gap} ${gap}`;
-
-const flow = ({ flow = "row" }) => flow;
-
-const Grid = styled.div`
-  min-height: 100%;
-  display: grid;
-  grid-auto-flow: ${flow};
-  grid-auto-rows: ${minmax};
-  grid-template-rows: ${minmax};
-  grid-template-columns: ${columnRepeat};
-  grid-gap: ${gap};
-`;
-
-export default Grid;
+import styled from "styled-components";
+
+const autoRows = ({ minRowHeight = "20px" }) => `minmax(${minRowHeight}, auto)`;
+
+const columns = ({ columns = 12 }) =>
+  typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns;
+
+const gap = ({ gap = "8px" }) => `${gap} ${gap}`;
+
+const flow = ({ flow = "row" }) => flow;
+
+const Grid = styled.div`
+  min-height: 100%;
+  display: grid;
+  grid-auto-flow: ${flow};
+  grid-auto-rows: ${autoRows};
+  ${({ rows }) => rows && `grid-template-rows: ${rows}`};
+  grid-template-columns: ${columns};
+  grid-gap: ${gap};
+`;
+
+export default Grid;
diff --git a/lib/__tests__/Grid.test.js b/lib/__tests__/Grid.test.js
index b92fa8a..5eb6c24 100644
--- a/lib/__tests__/Grid.test.js
+++ b/lib/__tests__/Grid.test.js
@@ -10,20 +10,34 @@ describe("<Grid />", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test("'columns' prop sets 'grid-template-columns'", () => {
+  test("'columns' as number prop sets 'grid-template-columns' to repeat()", () => {
     const tree = renderer.create(<Grid columns={7} />).toJSON();
     expect(tree).toHaveStyleRule("grid-template-columns", "repeat(7,1fr)");
   });
 
+  test("'columns' as string prop sets 'grid-template-columns'", () => {
+    const tree = renderer
+      .create(<Grid columns="repeat(auto-fit, minmax(100px, 1fr))" />)
+      .toJSON();
+    expect(tree).toHaveStyleRule(
+      "grid-template-columns",
+      "repeat(auto-fit,minmax(100px,1fr))"
+    );
+  });
+
+  test("'rows' as string prop sets 'grid-template-rows'", () => {
+    const tree = renderer.create(<Grid rows="1fr 2fr 1fr" />).toJSON();
+    expect(tree).toHaveStyleRule("grid-template-rows", "1fr 2fr 1fr");
+  });
+
   test("'gap' prop sets 'grid-gap'", () => {
     const tree = renderer.create(<Grid gap="7px" />).toJSON();
     expect(tree).toHaveStyleRule("grid-gap", "7px 7px");
   });
 
-  test("'minRowHeight' prop sets 'grid-auto-rows' and 'grid-template-rows'", () => {
+  test("'minRowHeight' prop sets 'grid-auto-rows'", () => {
     const tree = renderer.create(<Grid minRowHeight="7px" />).toJSON();
     expect(tree).toHaveStyleRule("grid-auto-rows", "minmax(7px,auto)");
-    expect(tree).toHaveStyleRule("grid-template-rows", "minmax(7px,auto)");
   });
 
   test("'flow' prop sets 'grid-auto-flow'", () => {
diff --git a/lib/__tests__/__snapshots__/Grid.test.js.snap b/lib/__tests__/__snapshots__/Grid.test.js.snap
index 69de459..7e1a20d 100644
--- a/lib/__tests__/__snapshots__/Grid.test.js.snap
+++ b/lib/__tests__/__snapshots__/Grid.test.js.snap
@@ -6,7 +6,6 @@ exports[`<Grid /> matches snapshot with default args 1`] = `
   display: grid;
   grid-auto-flow: row;
   grid-auto-rows: minmax(20px,auto);
-  grid-template-rows: minmax(20px,auto);
   grid-template-columns: repeat(12,1fr);
   grid-gap: 8px 8px;
 }
diff --git a/website/components/Main.js b/website/components/Main.js
index 672a326..aac4463 100644
--- a/website/components/Main.js
+++ b/website/components/Main.js
@@ -6,15 +6,17 @@ import HolyGrailSection from "./sections/HolyGrail";
 import PositioningSection from "./sections/Positioning";
 import TraditionalGridSection from "./sections/TraditionalGrid";
 import TransposedGridSection from "./sections/TransposedGrid";
+import ResponsiveSection from "./sections/Responsive";
 
 const Main = () =>
   <main className="language-jsx">
     <TraditionalGridSection />
     <TransposedGridSection />
-    <HolyGrailSection />
-    <CenteringSection />
     <PositioningSection />
     <DenseSection />
+    <ResponsiveSection />
+    <HolyGrailSection />
+    <CenteringSection />
   </main>;
 
 export default Main;
diff --git a/website/components/sections/Centering.js b/website/components/sections/Centering.js
index 40c1565..d2a0219 100644
--- a/website/components/sections/Centering.js
+++ b/website/components/sections/Centering.js
@@ -43,7 +43,7 @@ const CenteringSection = () =>
         </pre>
       }
       output={<Centering />}
-      path={"website/components/Centering.js"}
+      path={"website/components/sections/Centering.js"}
     />
   </section>;
 
diff --git a/website/components/sections/Dense.js b/website/components/sections/Dense.js
index 443d147..6a2cf68 100644
--- a/website/components/sections/Dense.js
+++ b/website/components/sections/Dense.js
@@ -63,7 +63,7 @@ const DenseSection = () =>
     <p>
       By default, <code>styled-css-grid</code> set the flow property to{" "}
       <code>row</code>. However, by setting it to <code>row dense</code> you can
-      turn on CSS grid&quot;s dense cell packing. Notice how the order of the
+      turn on CSS grid&#39;s dense cell packing. Notice how the order of the
       cells in the markup is not same when it is rendered!
     </p>
     <Example
diff --git a/website/components/sections/HolyGrail.js b/website/components/sections/HolyGrail.js
index e8e5f0f..8d0a1c5 100644
--- a/website/components/sections/HolyGrail.js
+++ b/website/components/sections/HolyGrail.js
@@ -6,41 +6,42 @@ import Heading from "../Heading";
 import Cell from "../DemoCell";
 
 const HolyGrail = () =>
-  <article>
-    <Grid columns={12} minRowHeight="45px">
-      <Cell width={12} center middle>
-        Header
+  <article style={{ height: "100%" }}>
+    <Grid
+      columns="100px 1fr 100px"
+      rows="minmax(45px, auto) 1fr minmax(45px, auto)"
+    >
+      <Cell width={3} center middle>
+        <h1>Header</h1>
       </Cell>
-      <Cell width={3} height={3} center middle>
+      <Cell center middle>
         Menu
       </Cell>
-      <Cell width={6} height={3} center middle>
+      <Cell center middle>
         Content
       </Cell>
-      <Cell width={3} height={3} center middle>
+      <Cell center middle>
         Ads
       </Cell>
-      <Cell width={12} center middle>
+      <Cell width={3} center middle>
         Footer
       </Cell>
     </Grid>
   </article>;
 
 const code = stripIndent`
-  <Grid columns={12}>
-    <Cell width={12}>
-      Header
+  <Grid
+    columns={"100px 1fr 100px"}
+    rows={"minmax(45px,auto) 1fr minmax(45px,auto)"}>
+    <Cell width={3}>
+      <h1>Header</h1>
     </Cell>
-    <Cell width={3} height={3}>
-      Menu
-    </Cell>
-    <Cell width={6} height={3}>
-      Content
-    </Cell>
-    <Cell width={3} height={3}>
-      Ads
-    </Cell>
-    <Cell width={12}>
+
+    <Cell>Menu</Cell>
+    <Cell>Content</Cell>
+    <Cell>Ads</Cell>
+
+    <Cell width={3}>
       Footer
     </Cell>
   </Grid>
@@ -54,7 +55,14 @@ const HolyGrailSection = () =>
       <a href="https://en.wikipedia.org/wiki/Holy_Grail_(web_design)">
         Holy Grail
       </a>{" "}
-      layout is trivial!
+      layout is trivial using the <code>rows</code> prop. This prop is forwarded
+      to the{" "}
+      <a href="https://mdn.io/grid-template-rows">
+        <code>grid-template-rows</code>
+      </a>{" "}
+      CSS property. In this example we set the first and last rows to be at
+      least 45px tall, but auto-grow if the content grows. The middle row is set
+      to 1fr, which will grow to take up all available space.
     </p>
     <Example
       input={
diff --git a/website/components/sections/Responsive.js b/website/components/sections/Responsive.js
new file mode 100644
index 0000000..559389e
--- /dev/null
+++ b/website/components/sections/Responsive.js
@@ -0,0 +1,75 @@
+import React from "react";
+import { stripIndent } from "common-tags";
+import { Grid } from "../../../";
+import Example from "../Example";
+import Heading from "../Heading";
+import Cell from "../DemoCell";
+
+const Responsive = () =>
+  <article>
+    <Grid columns="repeat(auto-fit, minmax(120px, 1fr))" minRowHeight="45px">
+      <Cell center middle>
+        A
+      </Cell>
+      <Cell center middle>
+        B
+      </Cell>
+      <Cell center middle>
+        C
+      </Cell>
+      <Cell center middle>
+        D
+      </Cell>
+      <Cell center middle>
+        E
+      </Cell>
+      <Cell center middle>
+        F
+      </Cell>
+    </Grid>
+  </article>;
+
+const code = stripIndent`
+  <Grid columns="repeat(auto-fit,minmax(120px,1fr))">
+    <Cell>A</Cell>
+    <Cell>B</Cell>
+    ...
+  </Grid>
+`;
+
+const ResponsiveSection = () =>
+  <section>
+    <Heading name="responsive">Responsive Layout</Heading>
+    <p>
+      The{" "}
+      <a href="https://mdn.io/grid-template-columns">
+        <code>grid-template-columns</code>
+      </a>{" "}
+      CSS property is incredibly powerful for building responsive content. When
+      the <code>columns</code> prop is a number, it is a shorthand for{" "}
+      <code>grid-template-columns: repeat(N, 1fr)</code>. However, when you pass
+      a string, the value is passed directly to the CSS property, allowing you
+      leverage the full power of this property.
+    </p>
+    <p>
+      If you&#39;re just after basic responsive content that will automatically
+      fit to your content, you can use{" "}
+      <code>repeat(auto-fit, minmax(120px, 1fr))</code> as your{" "}
+      <code>columns</code> prop, which will create columns to auto-fit your
+      content with a minimum width of 120px.
+    </p>
+    <p>Resize your browser for an example.</p>
+    <Example
+      input={
+        <pre>
+          <code>
+            {code}
+          </code>
+        </pre>
+      }
+      output={<Responsive />}
+      path={"website/components/sections/Responsive.js"}
+    />
+  </section>;
+
+export default ResponsiveSection;