Row and col component

src/components/card/Card.style.scss

@@ -33,6 +33,7 @@
   &--outline {
     outline: 1px solid borderColor();
     outline-offset: .5rem;
+    margin: .5rem;
   }
 
   &__section {

src/components/card/Card.tsx

@@ -4,7 +4,7 @@ import {Color, Size} from "../../utils/types";
 
 
 export interface CardType extends HTMLProps<HTMLDivElement> {
-    children: ReactElement[]
+    children: ReactNode | ReactNode[]
     //defaults to secondary
     color?: Color,
     //defaults to normal

src/components/col/Col.style.scss

@@ -0,0 +1,18 @@
+@use "sass:math";
+@import "../../styles/media";
+
+.col {
+  flex: 1 0 0;
+}
+
+@each $name, $breakpoint in $breakpoints {
+  @for $i from 1 through 12 {
+    .col-#{$name}-#{$i} {
+      @include respond-above($name) {
+        flex: 0 0 auto;
+        width: math.div($i, 12) * 100%;
+      }
+    }
+  }
+}
+

src/components/col/Col.tsx

@@ -0,0 +1,25 @@
+import React, {HTMLProps, ReactNode} from "react";
+import "./Col.style.scss"
+
+export type ColBreakPointRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ColType extends HTMLProps<HTMLDivElement> {
+    children: ReactNode | ReactNode[]
+    xs?: ColBreakPointRange
+    sm?: ColBreakPointRange
+    md?: ColBreakPointRange
+    lg?: ColBreakPointRange
+    xl?: ColBreakPointRange
+    xxl?: ColBreakPointRange
+}
+
+const Col: React.FC<ColType> = (props) => {
+
+    const {children, xs, sm, md, lg, xl, xxl, ...args} = props
+
+    return <div {...args} className={`col ${xs ? `col-xs-${xs}` : ""} ${sm ? `col-sm-${sm}` : ""} ${md ? `col-md-${md}` : ""} ${lg ? `col-lg-${lg}` : ""} ${xl ? `col-lg-${xl}` : ""} ${xxl ? `col-xxl-${xxl}` : ""}`}>
+        {children}
+    </div>
+}
+
+export default Col

src/components/container/Container.stories.tsx

@@ -7,6 +7,8 @@ import ButtonGroup from "../button-group/ButtonGroup";
 import Button from "../button/Button";
 import {IconHeart, IconShare} from "@tabler/icons-react";
 import React from "react";
+import Row from "../row/Row";
+import Col from "../col/Col";
 
 const meta: Meta = {
     title: "Container",
@@ -57,4 +59,38 @@ export const ContainerWithNews = () => {
 
         </Card>
     </Container>
+}
+
+export const ContainerRowCol = () => {
+    return <div style={{background: "#ffffff1a", padding: "1rem 0"}}>
+        <Container>
+            <Row>
+                <Col xs={12} lg={4}>
+                    <Card gradient variant={"outlined"} color={"info"}>
+                        <Text size={"md"}>Heading 1</Text>
+                    </Card>
+                </Col>
+                <Col xs={12} lg={4}>
+                    <Card gradient variant={"outlined"} color={"info"}>
+                        <Text size={"md"}>Heading 2</Text>
+                    </Card>
+                </Col>
+                <Col xs={12} lg={4}>
+                    <Card gradient variant={"outlined"} color={"info"}>
+                        <Text size={"md"}>Heading 2</Text>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card gradient variant={"outlined"} color={"info"}>
+                        <Text size={"md"}>Heading 2</Text>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card gradient variant={"outlined"} color={"info"}>
+                        <Text size={"md"}>Heading 2</Text>
+                    </Card>
+                </Col>
+            </Row>
+        </Container>
+    </div>
 }

src/components/container/Container.style.scss

@@ -6,7 +6,8 @@
   margin-left: auto;
   max-width: 1320px;
   min-width: 1320px;
-  padding: 4rem 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   position: relative;
   z-index: 1;
 

src/components/row/Row.style.scss

@@ -0,0 +1,14 @@
+.row {
+  display: flex;
+  flex-wrap: wrap;
+
+  + .row {
+    margin-top: 1rem;
+  }
+
+  > * {
+    flex-shrink: 0;
+    max-width: 100%;
+    width: 100%;
+  }
+}

src/components/row/Row.tsx

@@ -0,0 +1,17 @@
+import React, {HTMLProps, ReactNode} from "react";
+import "./Row.style.scss"
+
+export interface RowType extends HTMLProps<HTMLDivElement> {
+    children: ReactNode | ReactNode[]
+}
+
+const Row: React.FC<RowType> = (props) => {
+
+    const {children, ...args} = props
+
+    return <div {...args} className={"row"}>
+        {children}
+    </div>
+}
+
+export default Row