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 @@