Add grid docs

docs/_sidebar.md

@@ -7,6 +7,8 @@
     - [Checkbox](component_APIs/checkbox.md)
     - [ColorButton](component_APIs/color_button.md)
     - [Form](component_APIs/form.md)
+    - [Grid](component_APIs/grid.md)
+        -[Grid Children](component_APIs/grid_components.md)
     - [Menu](component_APIs/menu.md)
         - [Menu.Item](component_APIs/menu_item.md)
     - [Picker](component_APIs/picker.md)

docs/component_APIs/grid.md

@@ -1,8 +1,8 @@
-# Form
+# Grid
 
-A container where there is a label on the left and a component on the right.
+A container where there are rows and columns to align the components.
 
-Each form component has a single prop, `label` which sets the label to its left. It is required.
+Every component has many props, which are described [here](grid_components.md) in detail.
 
 ```javascript
 import React, { Component } from 'react';
@@ -14,10 +14,14 @@ class Example extends Component {
     return (
       <App>
         <Window title="Example" height={500} width={500}>
-            <Form>
-                <TextInput label="Username" />
-                <TextInput label="Password" secure={true} />
-            </Form>
+          <Grid padded={true}>
+            <Button row={0} column={0}>
+              Hello
+            </Button>
+            <TextInput row={0} column={1}>
+              Hi
+            </TextInput>
+          </Grid>
         </Window>
       </App>
     );
@@ -37,7 +41,7 @@ render(<Example />);
 
 ### enabled
 
-Whether the Form is enabled.
+Whether the Grid is enabled.
 
 | **Type** | **Required** |
 | --- | --- |
@@ -45,7 +49,7 @@ Whether the Form is enabled.
 
 ### visible
 
-Whether the Form can be seen.
+Whether the Grid can be seen.
 
 | **Type** | **Required** |
 | --- | --- |

docs/component_APIs/grid_components.md

@@ -0,0 +1,80 @@
+# Grid Children
+
+A child in a [Grid component](grid.md). Can specify the location in the grid, as well as additional formatting.
+
+```javascript
+import React, { Component } from 'react';
+
+import { render, Window, App, Form, TextInput } from 'proton-native';
+
+class Example extends Component {
+  render() {
+    return (
+      <App>
+        <Window title="Example" height={500} width={500}>
+          <Grid padded={true}>
+            <Button row={0} column={0}>
+              Hello
+            </Button>
+            <TextInput row={0} column={1}>
+              Hi
+            </TextInput>
+          </Grid>
+        </Window>
+      </App>
+    );
+  }
+}
+
+render(<Example />);
+```
+
+## Props
+
+- [column](#column)
+- [row](#row)
+- [span](#span)
+- [expand](#expand)
+- [align](#align)
+
+## Reference
+
+### column
+
+What column the component resides in.
+
+| **Type** | **Required** |
+| --- | --- |
+| number | No |
+
+### row
+
+What row the component resides in.
+
+| **Type** | **Required** |
+| --- | --- |
+| number | No |
+
+### span
+
+How many rows/columns the component takes off.
+
+| **Type** | **Required** |
+| --- | --- |
+| object {x: number, y: number} | No |
+
+### expand
+
+Whether the component can expand in the direction.
+
+| **Type** | **Required** |
+| --- | --- |
+| object {h: bool, v: bool} | No |
+
+### align
+
+Whether the component is aligned with the other components in the column/row.
+
+| **Type** | **Required** |
+| --- | --- |
+| object {h: bool, v: bool} | No |