diff --git a/app/src/paths.js b/app/src/paths.js
index f65681c57..d31346ee5 100644
--- a/app/src/paths.js
+++ b/app/src/paths.js
@@ -224,4 +224,4 @@ const componentsMap = [
},
];
-export default componentsMap;
\ No newline at end of file
+export default componentsMap;
diff --git a/lib/src/grid/Grid.stories.tsx b/lib/src/grid/Grid.stories.tsx
new file mode 100644
index 000000000..c5813d587
--- /dev/null
+++ b/lib/src/grid/Grid.stories.tsx
@@ -0,0 +1,219 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import styled from "styled-components";
+import DxcGrid from "./Grid";
+import DxcInset from "../inset/Inset";
+
+export default {
+ title: "Grid",
+ component: DxcGrid,
+};
+
+export const Chromatic = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+
+ Sidenav
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+
+
+
+
+
+
+ 1
+
+
+ 3
+
+
+ 5
+
+
+ 4
+
+
+ 2
+
+
+
+
+
+
+
+ 1
+
+ 2
+ 3
+ 4
+
+
+ 5
+
+
+
+
+
+
+
+
+ 1
+
+ 2
+ 3
+ 4
+
+
+ 5
+
+
+
+
+
+);
+
+const Container = styled.div<{ height?: string }>`
+ display: grid;
+ overflow: auto;
+ margin: 2.5rem;
+ ${({ height }) => height && `height: ${height}`};
+`;
+
+const ColoredContainer = styled.div<{ color?: string; width?: string; height?: string }>`
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: ${({ color }) => color ?? "#e5d5f6"};
+ padding: 1rem;
+ border: 1px solid #a46ede;
+ border-radius: 0.5rem;
+ font-family: Open Sans, sans-serif;
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #a46ede;
+
+ ${({ width }) => width && `width: ${width}`};
+ ${({ height }) => height && `height: ${height}`};
+`;
diff --git a/lib/src/grid/Grid.tsx b/lib/src/grid/Grid.tsx
new file mode 100644
index 000000000..6f8313177
--- /dev/null
+++ b/lib/src/grid/Grid.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import styled from "styled-components";
+import GridPropsType, { GridItemProps } from "./types";
+
+const DxcGrid = (props: GridPropsType): JSX.Element => ;
+
+const Grid = styled.div`
+ display: grid;
+ ${({ templateColumns }) => templateColumns && `grid-template-columns: ${templateColumns.join(" ")};`}
+ ${({ templateRows }) => templateRows && `grid-template-rows: ${templateRows.join(" ")};`}
+ ${({ templateAreas }) => templateAreas && `grid-template-areas: ${templateAreas.map((row) => `"${row}"`).join(" ")};`}
+ ${({ autoColumns }) => autoColumns && `grid-auto-columns: ${autoColumns};`}
+ ${({ autoRows }) => autoRows && `grid-auto-rows: ${autoRows};`}
+ ${({ autoFlow }) => autoFlow && `grid-auto-flow: ${autoFlow};`}
+ ${({ gap }) =>
+ gap != null &&
+ (typeof gap === "string" ? `gap: ${gap};` : `row-gap: ${gap.rowGap ?? ""}; column-gap: ${gap.columnGap ?? ""};`)}
+ ${({ placeItems }) =>
+ placeItems &&
+ (typeof placeItems === "string"
+ ? `place-items: ${placeItems}`
+ : `align-items: ${placeItems.alignItems ?? ""}; justify-items: ${placeItems.justifyItems ?? ""};`)}
+ ${({ placeContent }) =>
+ placeContent &&
+ (typeof placeContent === "string"
+ ? `place-content: ${placeContent}`
+ : `align-content: ${placeContent.alignContent ?? ""}; justify-content: ${placeContent.justifyContent ?? ""};`)}
+
+ ${({ areaName }) => areaName && `grid-area: ${areaName};`}
+ ${({ column }) =>
+ column &&
+ `grid-column: ${
+ typeof column === "string" || typeof column === "number" ? column : `${column.start} / ${column.end};`
+ };`}
+ ${({ row }) =>
+ row && `grid-row: ${typeof row === "string" || typeof row === "number" ? row : `${row.start} / ${row.end};`};`}
+ ${({ placeSelf }) =>
+ placeSelf &&
+ (typeof placeSelf === "string"
+ ? `place-self: ${placeSelf}`
+ : `align-self: ${placeSelf.alignSelf ?? ""}; justify-self: ${placeSelf.justifySelf ?? ""};`)}
+`;
+
+const GridItem = styled.div`
+ ${({ areaName }) => areaName && `grid-area: ${areaName};`}
+ ${({ column }) =>
+ column &&
+ `grid-column: ${
+ typeof column === "string" || typeof column === "number" ? column : `${column.start} / ${column.end};`
+ };`}
+ ${({ row }) =>
+ row && `grid-row: ${typeof row === "string" || typeof row === "number" ? row : `${row.start} / ${row.end};`};`}
+ ${({ placeSelf }) =>
+ placeSelf &&
+ (typeof placeSelf === "string"
+ ? `place-self: ${placeSelf}`
+ : `align-self: ${placeSelf.alignSelf ?? ""}; justify-self: ${placeSelf.justifySelf ?? ""};`)}
+`;
+
+DxcGrid.GridItem = GridItem;
+export default DxcGrid;
diff --git a/lib/src/grid/types.ts b/lib/src/grid/types.ts
new file mode 100644
index 000000000..b5ca51ce9
--- /dev/null
+++ b/lib/src/grid/types.ts
@@ -0,0 +1,46 @@
+type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+type Gap = { rowGap: Spaces; columnGap?: Spaces } | { rowGap?: Spaces; columnGap: Spaces } | Spaces;
+type GridCell = { start: number | string; end: number | string };
+
+type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
+type PlaceContentValues =
+ | "normal"
+ | "start"
+ | "end"
+ | "center"
+ | "stretch"
+ | "space-between"
+ | "space-around"
+ | "space-evenly"
+ | "baseline";
+type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline";
+type PlaceObject = {
+ [Property in keyof Type as `${string & Property}${Capitalize}`]: Type[Property];
+};
+type PlaceGeneric =
+ | PlaceObject<{ justify?: PlaceValues; align: PlaceValues }, Element>
+ | PlaceObject<{ justify: PlaceValues; align?: PlaceValues }, Element>
+ | PlaceValues;
+
+export type GridItemProps = {
+ areaName?: string;
+ column?: number | string | GridCell;
+ row?: number | string | GridCell;
+ placeSelf?: PlaceGeneric;
+ as?: keyof HTMLElementTagNameMap;
+ children: React.ReactNode;
+};
+
+type Props = GridItemProps & {
+ autoColumns?: string;
+ autoRows?: string;
+ autoFlow?: "row" | "column" | "row dense" | "column dense";
+ gap?: Spaces | Gap;
+ placeContent?: PlaceGeneric;
+ placeItems?: PlaceGeneric;
+ templateAreas?: string[];
+ templateColumns?: string[];
+ templateRows?: string[];
+};
+
+export default Props;
diff --git a/lib/src/main.ts b/lib/src/main.ts
index d345d6a25..331c36c83 100644
--- a/lib/src/main.ts
+++ b/lib/src/main.ts
@@ -39,6 +39,7 @@ import DxcFlex from "./flex/Flex";
import DxcTypography from "./typography/Typography";
import DxcParagraph from "./paragraph/Paragraph";
import DxcBulletedList from "./bulleted-list/BulletedList";
+import DxcGrid from "./grid/Grid";
import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
import { BackgroundColorProvider } from "./BackgroundColorContext";
@@ -89,4 +90,5 @@ export {
DxcTypography,
DxcParagraph,
DxcBulletedList,
+ DxcGrid,
};