docs(grid): update API docs and add to breaking changes

angular/BREAKING.md

@@ -13,6 +13,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
 - [Dynamic Mode](#dynamic-mode)
 - [FAB](#fab)
 - [Fixed Content](#fixed-content)
+- [Grid](#grid)
 - [Icon](#icon)
 - [Input](#Input)
 - [Item](#item)
@@ -427,6 +428,19 @@ The `<ion-fab>` container was previously placed inside of the fixed content by d
 </ion-content>
 ```
 
+## Grid
+
+The Grid has been refactored in order to support css variables and a dynamic number of columns. The following column attributes have been changed.
+
+_In the following examples, `{breakpoint}` refers to the optional screen breakpoint (xs, sm, md, lg, xl) and `{value}` refers to the number of columns._
+
+- `col-{breakpoint}-{value}` attributes have been renamed to `size-{breakpoint}=“{value}”`
+- `offset-{breakpoint}-{value}` attributes have been renamed to `offset-{breakpoint}=“{value}”`
+- `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”`
+- `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”`
+
+Customizing the padding styles should now be done with css variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).
+
 ## Icon
 
 ### Fonts Removed

core/src/components/col/readme.md

@@ -3,6 +3,9 @@
 Columns are cellular components of the [grid](../Grid) system and go inside of a [row](../Row).
 They will expand to fill their row. All content within a grid should go inside of a column.
 
+See [Grid Layout](/docs/layout/grid) for more information.
+
+
 ## Column attributes
 
 By default, columns will stretch to fill the entire height of the row.

core/src/components/grid/readme.md

@@ -3,29 +3,9 @@
 
 The grid is a powerful mobile-first flexbox system for building custom layouts.
 
-It is composed of two units — a grid, and column(s). Columns will expand to fill the grid, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
+It is composed of three units — a grid, [row(s)](../Row) and [column(s)]((../Col)). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
 
-See [Responsive Grid](/docs/layout/grid) for more information.
+See [Grid Layout](/docs/layout/grid) for more information.
-
-## Grid attributes
-
-By default, columns will stretch to fill the entire height of the grid and wrap when necessary.
-There are several attributes that can be added to a grid to customize this behavior.
-
-| Property                    | Description                                                                                                                                      |
-|-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|
-| nowrap                      | Adds `flex-wrap: nowrap`. Forces the columns to a single row.                                                                                    |
-| wrap-reverse                | Adds `flex-wrap: wrap-reverse`. The columns will wrap in reverse.                                                                                |
-| align-items-start           | Adds `align-items: flex-start`. All columns will be vertically aligned at the top, unless they specify their own alignment.                      |
-| align-items-center          | Adds `align-items: center`. All columns will be vertically aligned in the center, unless they specify their own alignment.                       |
-| align-items-end             | Adds `align-items: flex-end`. All columns will be vertically aligned at the bottom, unless they specify their own alignment.                     |
-| align-items-stretch         | Adds `align-items: stretch`. All columns will be stretched to take up the entire height of the row, unless they specify their own alignment.     |
-| align-items-baseline        | Adds `align-items: baseline`. All columns will be vertically aligned at their baselines, unless they specify their own alignment.                |
-| justify-content-start       | Adds `justify-content: start`. All columns will be horizontally aligned at the start.                                                            |
-| justify-content-center      | Adds `justify-content: center`. All columns will be horizontally aligned at the center.                                                          |
-| justify-content-end         | Adds `justify-content: end`. All columns will be horizontally aligned at the end.                                                                |
-| justify-content-around      | Adds `justify-content: space-around`. All columns will be horizontally aligned with equal space around them.                                     |
-| justify-content-between     | Adds `justify-content: space-between`. All columns will be horizontally aligned with a half-size space on either end.                            |
 
 
 <!-- Auto Generated Below -->

core/src/components/row/readme.md

@@ -3,6 +3,8 @@
 Rows are horizontal components of the [grid](../Grid) system and contain varying numbers of
 [columns](../Col). They ensure the columns are positioned properly.
 
+See [Grid Layout](/docs/layout/grid) for more information.
+
 
 ## Row attributes