Adjust Library grid styles

src/Library.js

@@ -1,24 +1,17 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { style, borderColor } from 'styled-system'
+import {
+  style,
+  gridGap,
+  gridAutoRows,
+  borderColor
+} from 'styled-system'
 
 const gridWidth = style({
   prop: 'width',
   cssProperty: 'gridTemplateColumns',
-  getter: n => `repeat(auto-fit, minmax(${n}, 1fr))`
+  getter: n => `repeat(auto-fit, minmax(${n}px, 1fr))`
-})
-
-const gridGap = style({
-  prop: 'gap',
-  cssProperty: 'gridGap',
-  numberToPx: true
-})
-
-const gridHeight = style({
-  prop: 'height',
-  cssProperty: 'gridAutoRows',
-  numberToPx: true
 })
 
 const Grid = styled.div([], {
@@ -26,12 +19,12 @@ const Grid = styled.div([], {
 },
   gridWidth,
   gridGap,
-  gridHeight
+  gridAutoRows
 )
 
 Grid.defaultProps = {
-  width: '256px',
+  width: 256,
-  height: 192
+  gridAutoRows: 192
 }
 
 const Card = styled(Link)([], {

test/snapshots/components.js.md

@@ -66,9 +66,8 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <div
-      className="sc-bbmXgH hCNAIb"
+      className="sc-bbmXgH kzGbIY"
-      height={192}
+      width={256}
-      width="256px"
     >
       <a
         borderColor="gray"