From 0ef06624a2484c6dadc872c2682b93616b499dd9 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 16 Aug 2018 18:14:29 -0400
Subject: [PATCH] docs(grid): document the custom properties for all grid vars

references #14850
---
 core/src/components/col/col.scss   |  9 +++++++++
 core/src/components/col/readme.md  | 12 ++++++++++++
 core/src/components/grid/grid.scss | 16 ++++++++++++++++
 core/src/components/grid/readme.md | 18 ++++++++++++++++++
 4 files changed, 55 insertions(+)

diff --git a/core/src/components/col/col.scss b/core/src/components/col/col.scss
index 37922e642f..ee7045e623 100644
--- a/core/src/components/col/col.scss
+++ b/core/src/components/col/col.scss
@@ -4,6 +4,15 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --ion-grid-columns: The number of total Columns in the Grid
+   * @prop --ion-grid-column-padding: Padding for the Column
+   * @prop --ion-grid-column-padding-xs: Padding for the Column on xs screens and up
+   * @prop --ion-grid-column-padding-sm: Padding for the Column on sm screens and up
+   * @prop --ion-grid-column-padding-md: Padding for the Column on md screens and up
+   * @prop --ion-grid-column-padding-lg: Padding for the Column on lg screens and up
+   * @prop --ion-grid-column-padding-xl: Padding for the Column on xl screens and up
+   */
   @include make-breakpoint-padding($grid-column-paddings);
   @include margin(0);
 
diff --git a/core/src/components/col/readme.md b/core/src/components/col/readme.md
index 9984cc2942..21a39916d2 100644
--- a/core/src/components/col/readme.md
+++ b/core/src/components/col/readme.md
@@ -54,6 +54,18 @@ There are several attributes that can be added to a column to customize this beh
 | `size`     | `size`      | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.                | `string` |
 
 
+## CSS Custom Properties
+
+| Name                           | Description                                 |
+| ------------------------------ | ------------------------------------------- |
+| `--ion-grid-column-padding`    | Padding for the Column                      |
+| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up |
+| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up |
+| `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up |
+| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up |
+| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/grid/grid.scss b/core/src/components/grid/grid.scss
index 9feb240050..354bb142eb 100644
--- a/core/src/components/grid/grid.scss
+++ b/core/src/components/grid/grid.scss
@@ -4,6 +4,22 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --ion-grid-padding: Padding for the Grid
+   * @prop --ion-grid-padding-xs: Padding for the Grid on xs screens
+   * @prop --ion-grid-padding-sm: Padding for the Grid on sm screens
+   * @prop --ion-grid-padding-md: Padding for the Grid on md screens
+   * @prop --ion-grid-padding-lg: Padding for the Grid on lg screens
+   * @prop --ion-grid-padding-xl: Padding for the Grid on xl screens
+   *
+   * @prop --ion-grid-width: Width of the fixed Grid
+   * @prop --ion-grid-width-xs: Width of the fixed Grid on xs screens
+   * @prop --ion-grid-width-sm: Width of the fixed Grid on sm screens
+   * @prop --ion-grid-width-md: Width of the fixed Grid on md screens
+   * @prop --ion-grid-width-lg: Width of the fixed Grid on lg screens
+   * @prop --ion-grid-width-xl: Width of the fixed Grid on xl screens
+   */
+
   @include make-breakpoint-padding($grid-paddings);
   @include margin-horizontal(auto);
 
diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index 83e8e1bb03..19f53565ad 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -17,6 +17,24 @@ See [Grid Layout](/docs/layout/grid) for more information.
 | `fixed`  | `fixed`   | If true, the grid will have a fixed width based on the screen size. Defaults to `false`. | `boolean` |
 
 
+## CSS Custom Properties
+
+| Name                    | Description                           |
+| ----------------------- | ------------------------------------- |
+| `--ion-grid-padding`    | Padding for the Grid                  |
+| `--ion-grid-padding-lg` | Padding for the Grid on lg screens    |
+| `--ion-grid-padding-md` | Padding for the Grid on md screens    |
+| `--ion-grid-padding-sm` | Padding for the Grid on sm screens    |
+| `--ion-grid-padding-xl` | Padding for the Grid on xl screens    |
+| `--ion-grid-padding-xs` | Padding for the Grid on xs screens    |
+| `--ion-grid-width`      | Width of the fixed Grid               |
+| `--ion-grid-width-lg`   | Width of the fixed Grid on lg screens |
+| `--ion-grid-width-md`   | Width of the fixed Grid on md screens |
+| `--ion-grid-width-sm`   | Width of the fixed Grid on sm screens |
+| `--ion-grid-width-xl`   | Width of the fixed Grid on xl screens |
+| `--ion-grid-width-xs`   | Width of the fixed Grid on xs screens |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*