diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index 349ba466..f98225a7 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -1,16 +1,35 @@
diff --git a/src/Grid/Grid.Story.svelte b/src/Grid/Grid.Story.svelte
index 8d8191d5..2b5dda68 100644
--- a/src/Grid/Grid.Story.svelte
+++ b/src/Grid/Grid.Story.svelte
@@ -22,7 +22,6 @@
Columns with auto-width
-
@@ -49,7 +48,6 @@
Responsive Grid
-
@@ -76,7 +74,6 @@
Columns with Offset
-
@@ -103,7 +100,6 @@
Condensed Grid
-
@@ -130,7 +126,6 @@
Condensed Columns
-
@@ -201,7 +196,6 @@
Full Width
-
@@ -226,4 +220,72 @@
+
+ Aspect Ratio: 2x1
+
+
+ 1
+ 1
+
+
+
+ Aspect Ratio: 16x9
+
+
+ 1
+ 1
+ 1
+ 1
+
+
+
+ Aspect Ratio: 4x3
+
+
+ 1
+ 1
+ 1
+ 1
+
+
+
+ Aspect Ratio: 1x1
+
+
+ 1
+ 1
+ 1
+ 1
+
+
+
+ Aspect Ratio: 3x4
+
+
+ 1
+ 1
+ 1
+ 1
+
+
+
+ Aspect Ratio: 9x16
+
+
+ 1
+ 1
+ 1
+ 1
+
+
+
+ Aspect Ratio: 1x2
+
+
+ 1
+ 1
+ 1
+ 1
+
+
diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte
index ac597167..fa3b06e4 100644
--- a/src/Grid/Grid.svelte
+++ b/src/Grid/Grid.svelte
@@ -2,6 +2,9 @@
export let as = false;
export let condensed = false;
export let fullWidth = false;
+ export let noGutter = false;
+ export let noGutterLeft = false;
+ export let noGutterRight = false;
$: props = {
...$$restProps,
@@ -9,10 +12,13 @@
$$restProps.class,
"bx--grid",
condensed && "bx--grid--condensed",
- fullWidth && "bx--grid--full-width"
+ fullWidth && "bx--grid--full-width",
+ noGutter && "bx--no-gutter",
+ noGutterLeft && "bx--no-gutter--left",
+ noGutterRight && "bx--no-gutter--right",
]
.filter(Boolean)
- .join(" ")
+ .join(" "),
};
diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte
index cc0fdc48..c394655b 100644
--- a/src/Grid/Row.svelte
+++ b/src/Grid/Row.svelte
@@ -1,12 +1,22 @@