diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html
index 57b3d4eba52..1d4b87ae252 100644
--- a/ionic/components/card/test/advanced/main.html
+++ b/ionic/components/card/test/advanced/main.html
@@ -19,20 +19,22 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -55,26 +57,28 @@ Card With An Inset Picture
Hello. I am a paragraph.
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -87,27 +91,29 @@ Card With An Inset Picture
This card was breaking the border radius.
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss
index 341b523ca6f..165b50e84a5 100644
--- a/ionic/components/grid/grid.scss
+++ b/ionic/components/grid/grid.scss
@@ -45,22 +45,25 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab
}
}
-
-ion-row {
+ion-grid {
display: flex;
+ flex-direction: column;
+
padding: ($grid-padding-width / 2);
width: 100%;
+}
+
+ion-row {
+ display: flex;
+
+ width: 100%;
&[wrap] {
flex-wrap: wrap;
}
- &[flush] {
- padding: 0;
- }
-
&[top] {
align-items: flex-start;
}
@@ -82,11 +85,6 @@ ion-row {
}
}
-ion-row + ion-row {
- margin-top: ($grid-padding-width / 2) * -1;
- padding-top: 0;
-}
-
ion-col {
display: block;
diff --git a/ionic/components/grid/test/basic/main.html b/ionic/components/grid/test/basic/main.html
index 8e2453a5b0e..f7b9f8f1132 100644
--- a/ionic/components/grid/test/basic/main.html
+++ b/ionic/components/grid/test/basic/main.html
@@ -1,251 +1,253 @@
Grid
-
-
-
- ion-col
-
-
-
-
- ion-col
-
-
-
-
- ion-col
-
-
-
-
- ion-col
-
-
-
+
+
+
+
+ ion-col
+
+
+
+
+ ion-col
+
+
+
+
+ ion-col
+
+
+
+
+ ion-col
+
+
+
-
-
-
- ion-col[width-50]
-
-
-
-
- ion-col
-
-
-
-
- ion-col
-
-
-
+
+
+
+ ion-col[width-50]
+
+
+
+
+ ion-col
+
+
+
+
+ ion-col
+
+
+
-
-
-
- ion-col[width-25]
-
-
-
-
- ion-col
-
-
-
-
- ion-col[width-25]
-
-
-
+
+
+
+ ion-col[width-25]
+
+
+
+
+ ion-col
+
+
+
+
+ ion-col[width-25]
+
+
+
-
-
-
- ion-col[width-25]
-
-
-
-
- ion-col[width-25][offset-25]
-
-
-
+
+
+
+ ion-col[width-25]
+
+
+
+
+ ion-col[width-25][offset-25]
+
+
+
-
-
-
- ion-col
-
-
-
-
- ion-col
#
-
-
-
-
- ion-col
#
#
-
-
-
-
- ion-col
#
#
#
-
-
-
+
+
+
+ ion-col
+
+
+
+
+ ion-col
#
+
+
+
+
+ ion-col
#
#
+
+
+
+
+ ion-col
#
#
#
+
+
+
-
-
-
- ion-col[top]
-
-
-
-
- ion-col[center]
-
-
-
-
- ion-col[bottom]
-
-
-
-
- ion-col
#
#
-
-
-
+
+
+
+ ion-col[top]
+
+
+
+
+ ion-col[center]
+
+
+
+
+ ion-col[bottom]
+
+
+
+
+ ion-col
#
#
+
+
+
-
-
-
- [top] ion-col
-
-
-
-
- [top] ion-col
-
-
-
-
- [top] ion-col[bottom]
-
-
-
-
- ion-col
#
#
-
-
-
+
+
+
+ [top] ion-col
+
+
+
+
+ [top] ion-col
+
+
+
+
+ [top] ion-col[bottom]
+
+
+
+
+ ion-col
#
#
+
+
+
-
-
-
- [center] ion-col
-
-
-
-
- [center] ion-col
-
-
-
-
- [center] ion-col
-
-
-
-
- ion-col
#
#
-
-
-
+
+
+
+ [center] ion-col
+
+
+
+
+ [center] ion-col
+
+
+
+
+ [center] ion-col
+
+
+
+
+ ion-col
#
#
+
+
+
-
-
-
- [bottom] ion-col
-
-
-
-
- [bottom] ion-col[top]
-
-
-
-
- [bottom] ion-col
-
-
-
-
- ion-col
#
#
-
-
-
+
+
+
+ [bottom] ion-col
+
+
+
+
+ [bottom] ion-col[top]
+
+
+
+
+ [bottom] ion-col
+
+
+
+
+ ion-col
#
#
+
+
+
-
-
-
- [responsive-sm] ion-col
-
-
-
-
- [responsive-sm] ion-col
-
-
-
-
- [responsive-sm] ion-col
-
-
-
-
- [responsive-sm] ion-col
-
-
-
+
+
+
+ [responsive-sm] ion-col
+
+
+
+
+ [responsive-sm] ion-col
+
+
+
+
+ [responsive-sm] ion-col
+
+
+
+
+ [responsive-sm] ion-col
+
+
+
-
-
-
- [responsive-md] ion-col
-
-
-
-
- [responsive-md] ion-col
-
-
-
-
- [responsive-md] ion-col
-
-
-
-
- [responsive-md] ion-col
-
-
-
+
+
+
+ [responsive-md] ion-col
+
+
+
+
+ [responsive-md] ion-col
+
+
+
+
+ [responsive-md] ion-col
+
+
+
+
+ [responsive-md] ion-col
+
+
+
-
-
-
- [responsive-lg] ion-col[width-50][offset-25]
-
-
-
-
- [responsive-lg] ion-col[width-25]
-
-
-
+
+
+
+ [responsive-lg] ion-col[width-50][offset-25]
+
+
+
+
+ [responsive-lg] ion-col[width-25]
+
+
+
+