Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Grid

A layout container using grid.

usage: import { Grid, repeat, minmax, fitContent } from "@sharegate/orbit-ui";
sources: Github

Usage

Grid layout offer a lot of options to solve a bunch of use cases. This page only showcase a few use cases. For a thorough documentation, please have a look at MDN.

Areas

A grid can define explicit sections with areas.

Editable example

<Grid areas={["a  a", "b c"]} gap={2} height={10}>
    <Div gridArea="a" backgroundColor="accent-5" />
    <Div gridArea="b" backgroundColor="alert-5" />
    <Div gridArea="c" backgroundColor="green-5" />
</Grid><Grid areas={["a  a", "b c"]} gap={2} height={10}>
    <Div gridArea="a" backgroundColor="accent-5" />
    <Div gridArea="b" backgroundColor="alert-5" />
    <Div gridArea="c" backgroundColor="green-5" />
</Grid>

Template columns

A grid can define explicit columns (and rows). A value can be a grid length value or an Orbit spacing scale value.

Editable example

<Grid templateColumns={[9, 7, "1fr"]} gap={2} height={5}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
</Grid><Grid templateColumns={[9, 7, "1fr"]} gap={2} height={5}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
</Grid>

Auto columns

A grid can define the size of implicitly created columns. A value can be a grid length value or an Orbit spacing scale value.

Editable example

<Grid autoColumns="1fr" gap={2} height={10}>
    <Div gridColumn={2} backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
</Grid><Grid autoColumns="1fr" gap={2} height={10}>
    <Div gridColumn={2} backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
</Grid>

Gap

A grid layout can have a gap between his columns and rows. columnGap and rowGap are also available to specify a gap for a single axis.

Editable example

<Grid templateColumns="1fr 1fr" gap={2} height={10}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
    <Div backgroundColor="neutral-5" />
</Grid><Grid templateColumns="1fr 1fr" gap={2} height={10}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
    <Div backgroundColor="neutral-5" />
</Grid>

Column spanning

A grid item can span over multiple columns.

Editable example

<Grid templateColumns="1fr 1fr 1fr" gap={2} height={10}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
    <Div gridColumnSpan={3} gridRow={2} backgroundColor="neutral-5" />
</Grid><Grid templateColumns="1fr 1fr 1fr" gap={2} height={10}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
    <Div gridColumnSpan={3} gridRow={2} backgroundColor="neutral-5" />
</Grid>

Nesting

Grids can be nested.

Editable example

<Grid templateRows={[5, 5]} gap={2}>
    <Grid templateColumns={[9, "auto"]}>
        <Div backgroundColor="accent-5" />
        <Div backgroundColor="alert-5" />
    </Grid>
    <Grid templateColumns={["auto", 14]}>
        <Div backgroundColor="green-5" />
        <Div backgroundColor="neutral-5" />
    </Grid>
</Grid><Grid templateRows={[5, 5]} gap={2}>
    <Grid templateColumns={[9, "auto"]}>
        <Div backgroundColor="accent-5" />
        <Div backgroundColor="alert-5" />
    </Grid>
    <Grid templateColumns={["auto", 14]}>
        <Div backgroundColor="green-5" />
        <Div backgroundColor="neutral-5" />
    </Grid>
</Grid>

Repeat

A custom repeat function is available to support Orbit spacing scale values. However, if you prefer, you can use the native CSS repeat function

Editable example

<Grid templateColumns={repeat("auto-fit", 7)} autoRows={7} gap={2}>
    {ShareGateTheme.colors.common.purple.map(x => (
        <Div backgroundColor={x} key={x} />
    ))}
    {ShareGateTheme.colors.common.alert.map(x => (
        <Div backgroundColor={x} key={x} />
    ))}
    {ShareGateTheme.colors.common.green.map(x => (
        <Div backgroundColor={x} key={x} />
    ))}
</Grid><Grid templateColumns={repeat("auto-fit", 7)} autoRows={7} gap={2}>
    {ShareGateTheme.colors.common.purple.map(x => (
        <Div backgroundColor={x} key={x} />
    ))}
    {ShareGateTheme.colors.common.alert.map(x => (
        <Div backgroundColor={x} key={x} />
    ))}
    {ShareGateTheme.colors.common.green.map(x => (
        <Div backgroundColor={x} key={x} />
    ))}
</Grid>

Minmax

A custom minmax function is available to support Orbit spacing scalue values. However, if you prefer, you can use the native CSS minmax function

Editable example

<Grid templateColumns={[minmax(9, "1fr"), 10, minmax(9, "1fr")]} gap={2} height={5}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
</Grid><Grid templateColumns={[minmax(9, "1fr"), 10, minmax(9, "1fr")]} gap={2} height={5}>
    <Div backgroundColor="accent-5" />
    <Div backgroundColor="alert-5" />
    <Div backgroundColor="green-5" />
</Grid>

Fit-content

Mars

Pluto

Jupiter

Editable example

<Grid
    templateColumns={[fitContent(9), fitContent(9), "1fr"]}
    gap={2}
    alignItems="center"
    color="alias-static-white"
>
    <Div backgroundColor="alias-accent" padding={1}>
        Mars
    </Div>
    <Div backgroundColor="alias-alert" padding={1}>
        Pluto
    </Div>
    <Div backgroundColor="alias-success" padding={1}>
        Jupiter
    </Div>
</Grid><Grid
    templateColumns={[fitContent(9), fitContent(9), "1fr"]}
    gap={2}
    alignItems="center"
    color="alias-static-white"
>
    <Div backgroundColor="alias-accent" padding={1}>
        Mars
    </Div>
    <Div backgroundColor="alias-alert" padding={1}>
        Pluto
    </Div>
    <Div backgroundColor="alias-success" padding={1}>
        Jupiter
    </Div>
</Grid>

API

Grid

usage: import { Grid } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
alignContent	See MDN. "center" \| "end" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch" \| "flex-end" \| "flex-start" \| "start" \| "baseline" \| "normal" \| string & {} \| ResponsiveValue<AlignContent>	-
alignItems	See MDN. "center" \| "end" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "stretch" \| "flex-end" \| "flex-start" \| "start" \| "baseline" \| "normal" \| string & {} \| "self-end" \| "self-start" \| ResponsiveValue<AlignItems>	-
areas	See MDN. string[] \| ResponsiveValue<string[]>	-
autoColumns	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| "auto" \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 14 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| "max-content" \| "min-content" \| 15 \| 16 \| 17 \| 18 \| ResponsiveValue<GridAutoColumnsValue>	-
autoFlow	See MDN. "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| "column" \| "row" \| "dense" \| ResponsiveValue<GridAutoFlow>	-
autoRows	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| "auto" \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 14 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| "max-content" \| "min-content" \| 15 \| 16 \| 17 \| 18 \| ResponsiveValue<GridAutoRowsValue>	-
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
columnGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<ColumnGapValue>	-
gap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<GapValue>	-
inline	Whether or not the element generate line breaks before or after himself. falsetrue	-
justifyContent	See MDN. "center" \| "left" \| "right" \| "end" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch" \| "flex-end" \| "flex-start" \| "start" \| "normal" \| string & {} \| ResponsiveValue<JustifyContent>	-
justifyItems	See MDN. "center" \| "left" \| "right" \| "end" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "stretch" \| "flex-end" \| "flex-start" \| "start" \| "baseline" \| "normal" \| string & {} \| "self-end" \| "self-start" \| "legacy" \| ResponsiveValue<JustifyItems>	-
rowGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<RowGapValue>	-
slot	Slot to render into. string	-
templateColumns	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| "auto" \| 1 \| "none" \| 13 \| 2 \| 3 \| 4 \| 6 \| 14 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| "max-content" \| "min-content" \| 15 \| 16 \| 17 \| 18 \| "subgrid" \| GridTemplateColumnsValue[] \| ResponsiveValue<GridTemplateColumnsValue \| GridTemplateColumnsValue[]>	-
templateRows	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| "auto" \| 1 \| "none" \| 13 \| 2 \| 3 \| 4 \| 6 \| 14 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| "max-content" \| "min-content" \| 15 \| 16 \| 17 \| 18 \| "subgrid" \| GridTemplateRowsValue[] \| ResponsiveValue<GridTemplateRowsValue \| GridTemplateRowsValue[]>	-

No Preview

Grid

Usage

Areas

Template columns

Auto columns

Gap

Column spanning

Nesting

Repeat

Minmax

Fit-content

API

Grid