Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationAtomsGrid

Grid

This component allows you to lay elements out using CSS Grid Layout

Basic Usage

import { Grid, GridItem } from '@krakentech/coral';
 
<Grid gap="md" gridTemplateColumns="repeat(2, 1fr)">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

Properties

alignContent

<div style={{ height: 300 }}>
    <Grid
        gap="md"
        fullHeight
        gridTemplateColumns="repeat(2, 1fr)"
        alignContent="space-between"
    >
        <GridItem>
            <Card theme="secondary900" borderless padding="small">
                1
            </Card>
        </GridItem>
        <GridItem>...</GridItem>
        <GridItem>...</GridItem>
        <GridItem>...</GridItem>
    </Grid>
</div>

1

2

3

4

alignItems

<div style={{ height: 200 }}>
    <Grid
        gap="md"
        gridTemplateColumns="repeat(2, 1fr)"
        gridTemplateRows="150px"
        alignItems="end"
        fullHeight
    >
        <GridItem>
            <Card theme="secondary900" borderless padding="small">
                1
            </Card>
        </GridItem>
        <GridItem>...</GridItem>
        <GridItem>...</GridItem>
        <GridItem>...</GridItem>
    </Grid>
</div>

1

2

3

4

gap

<Grid gap="xl" gridTemplateColumns="repeat(2, 1fr)">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

rowGap

<Grid rowGap="xl" gridTemplateColumns="repeat(2, 1fr)">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

columnGap

<Grid columnGap="xl" gridTemplateColumns="repeat(2, 1fr)">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

justifyContent

<Grid gap="md" gridTemplateColumns="150px" justifyContent="center">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

justifyItems

<Grid gap="md" gridTemplateColumns="repeat(2, 1fr)" justifyItems="end">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

placeItems

<Grid gap="md" gridTemplateColumns="repeat(2, 1fr)" placeItems="center">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

gridTemplateAreas

<Grid
    gap="md"
    gridTemplateColumns="200px 1fr 100px"
    gridTemplateAreas={`
        "header header header"
        "nav main aside"
        "nav footer footer"
    `}
>
    <GridItem gridArea="header">
        <Card theme="secondary900" borderless padding="small">
            Header
        </Card>
    </GridItem>
    <GridItem gridArea="nav">...</GridItem>
    <GridItem gridArea="main">...</GridItem>
    <GridItem gridArea="aside">...</GridItem>
    <GridItem gridArea="footer">...</GridItem>
</Grid>

Header

Nav

Main

Aside

Footer

gridTemplateColumns

<Grid gap="md" gridTemplateColumns="1fr 2fr">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

gridTemplateRows

<Grid gap="md" gridTemplateRows="1fr 2fr" gridTemplateColumns="1fr 2fr">
    <GridItem>
        <Card theme="secondary900" borderless padding="small">
            1
        </Card>
    </GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
    <GridItem>...</GridItem>
</Grid>

1

2

3

4

Full API

NameTypeDefault
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};
gapResponsiveVariant<keyof CoralSpacing>

Sets the gaps (gutters) between rows and columns

rowGapResponsiveVariant<keyof CoralSpacing>

Sets the gaps (gutters) between rows

columnGapResponsiveVariant<keyof CoralSpacing>

Sets the gaps (gutters) between columns

justifyContentResponsiveVariant<ConditionalValue<AnyString | JustifyContent | readonly string[] | undefined>>

The CSS justifyContent property to apply.

alignItemsResponsiveVariant<ConditionalValue<WithEscapeHatch<OnlyKnown<"alignItems", readonly string[] | `var(--${string})` | AlignItems | undefined>>> | undefined>

The CSS alignItems property to apply.

alignContentResponsiveVariant<ConditionalValue<WithEscapeHatch<OnlyKnown<"alignContent", readonly string[] | `var(--${string})` | AlignContent | undefined>>> | undefined>

The CSS alignContent property to apply.

placeItemsResponsiveVariant<ConditionalValue<AnyString | readonly string[] | PlaceItems | undefined>>

The CSS flexDirection property to apply.

gridConditionalValue<AnyString | readonly string[] | Grid | undefined>
gridTemplateAreasConditionalValue<AnyString | readonly string[] | GridTemplateAreas | undefined>
gridTemplateColumnsConditionalValue<AnyString | GridTemplateColumns<String | Number> | readonly NonNullable<GridTemplateColumns<String | Number> | undefined>[] | undefined>
gridTemplateRowsConditionalValue<AnyString | GridTemplateRows<String | Number> | readonly NonNullable<GridTemplateRows<String | Number> | undefined>[] | undefined>
fullWidthResponsiveVariant<boolean>

If true, the input will take up the full width of its container.

false
fullHeightResponsiveVariant<boolean>

If true, the input will take up the full height of its container.

false
justifyItemsConditionalValue<AnyString | readonly string[] | JustifyItems | undefined>

The CSS justify-items property applied to the grid.

component"symbol" | "object" | "base" | "clipPath" | "filter" | "mask" | "marker" | "center" | "time" | "p" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "bdi" | ... 154 more ... | ComponentType<...>

The HTML component to render as the root element of the grid.

div
childrenReactNode
Last updated on
FileInputGridItem