change(grid-story): added container as grid width is influenced by co…

…ntainer width
eea · May 12, 2022 · 459f481 · 459f481
1 parent 9f29cef
commit 459f481
Showing 1 changed file with 14 additions and 12 deletions.
diff --git a/src/ui/Grid/ComponentGrid.stories.js b/src/ui/Grid/ComponentGrid.stories.js
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
-import { Grid } from 'semantic-ui-react';
+import { Grid, Container } from 'semantic-ui-react';
 
 export default {
   title: 'Layout/Grid/Component Grid',
@@ -25,15 +25,17 @@ const getDiv = (text) => {
 export const Basic12 = (args) => <Grid>{getColumns(12, '')}</Grid>;
 
 export const GridExamples = (args) => (
-  <Grid>
-    <Grid.Row columns="two">{getColumns(2, '12/2')}</Grid.Row>
-    <Grid.Row columns="three">{getColumns(3, '12/3')}</Grid.Row>
-    <Grid.Row>
-      <Grid.Column width="three">{getDiv('12/4')}</Grid.Column>
-      <Grid.Column width="six">{getDiv('12/2')}</Grid.Column>
-      <Grid.Column width="three">{getDiv('12/4')}</Grid.Column>
-    </Grid.Row>
-    <Grid.Row columns="four">{getColumns(4, '12/4')}</Grid.Row>
-    <Grid.Row columns="five">{getColumns(5, '12/5')}</Grid.Row>
-  </Grid>
+  <Container>
+    <Grid>
+      <Grid.Row columns="two">{getColumns(2, '12/2')}</Grid.Row>
+      <Grid.Row columns="three">{getColumns(3, '12/3')}</Grid.Row>
+      <Grid.Row>
+        <Grid.Column width="three">{getDiv('12/4')}</Grid.Column>
+        <Grid.Column width="six">{getDiv('12/2')}</Grid.Column>
+        <Grid.Column width="three">{getDiv('12/4')}</Grid.Column>
+      </Grid.Row>
+      <Grid.Row columns="four">{getColumns(4, '12/4')}</Grid.Row>
+      <Grid.Row columns="five">{getColumns(5, '12/5')}</Grid.Row>
+    </Grid>
+  </Container>
 );