Next with Styled-Component

Grid

GridContainer

• GridContainer creates the 12 column grid. The number of columns at different view port is defined in src/designSystem/theme/index.ts
• GridContainer takes optional $isRootParent props which adds the margin. Ideally, it should only present at the root level to keep the contents from touching the border of browser.
• GridContainer within another GridContainer will re-create 12 column grid. This would be ok and have no impact when it is direct child of <GridContainer $isRootParent>

GridColumn

• GridColumn takes following props:

    $spanSmall?: number;
    $spanMedium?: number;
    $spanDesktop?: number;
    $alignItemsDesktop?: string;
    $alignItemsMedium?: string;
    $alignItemsSmall?: string;
                `

• $span* is used to define how many grid columns this container will take. The defaults are maximum number of columns for that viewport (except for case: if $spanDesktop is defined and $spanMedium is not defined, then $spanMedium value would be $spanDesktop)
• $alignItems* is used to define the alignment of contents.