Grid

View Source

NOTE: Introduced feature in v0.2.0.

Grid is a multi-part layout pattern for setting up a grid of items organized to a 12-point system.

USAGE: REPL does not support viewport values, resize your Browser to observe this feature.

<script>
    import {Box, Grid} from "@kahi-ui/framework";
</script>

<Grid.Container
    class="grid-preview"
    points={["6", "mobile:3", "tablet:4", "desktop:5"]}
    spacing="medium"
>
    <Box palette="alert" />
    <Box palette="affirmative" />
    <Box palette="negative" />

    <Box palette="affirmative" />
    <Box palette="negative" />
    <Box palette="alert" />

    <Box palette="alert" />
    <Box palette="affirmative" />
    <Box palette="negative" />

    <Box palette="negative" />
    <Box palette="alert" />
    <Box palette="affirmative" />

    <Box palette="affirmative" />
    <Box palette="negative" />
    <Box palette="alert" />
</Grid.Container>

<style>
    :global(.grid-preview .box) {
        height: 3rem;
    }
</style>

Imports

<script>
    import {Grid} from "@kahi-ui/framework";

    const {Container, Item} = Grid;
</script>

Points

NOTE: By passing an array, you can set responsive values. e.g. points={["7", "tablet:6", "mobile:5"]}

You can adjust how many points the Grid.Container items are divided by via the points property.

<script>
    import {
        Box,
        Grid,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="grid-points"
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">12</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="12"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">11</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="11"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">10</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="10"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">9</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="9"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">8</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="8"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">7</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="7"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">6</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="6"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">5</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="5"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">4</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="4"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">3</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="3"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">2</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="2"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">1</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="1"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>
</Stack.Container>

<style>
    :global(.grid-points .grid) {
        width: 14rem;
    }

    :global(.grid-points .grid .box) {
        height: 3rem;
    }
</style>

Spacing

NOTE: By passing an array, you can set responsive values. e.g. spacing={["medium", "tablet:small", "mobile:tiny"]}

You can adjust the spacing between items via the spacing, spacing_x, and spacing_y properties.

<script>
    import {
        Box,
        Grid,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    class="grid-spacing"
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container points="3">
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">TINY</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container points="3" spacing="tiny">
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">SMALL</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container points="3" spacing="small">
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container
                points="3"
                spacing="medium"
            >
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">LARGE</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container points="3" spacing="large">
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>

    <div>
        <Text is="strong">HUGE</Text>
        <Box palette="inverse" padding="small">
            <Grid.Container points="3" spacing="huge">
                <Box palette="alert" />
                <Box palette="affirmative" />
                <Box palette="negative" />

                <Box palette="affirmative" />
                <Box palette="negative" />
                <Box palette="alert" />
            </Grid.Container>
        </Box>
    </div>
</Stack.Container>

<style>
    :global(.grid-spacing .grid) {
        width: 12rem;
    }

    :global(.grid-spacing .grid .box) {
        height: 3rem;
    }
</style>

Item Span

NOTE: Introduced feature in v0.2.10.

NOTE: By passing an array, you can set responsive values. e.g. span={["3", "tablet:2", "mobile:1"]}

You can adjust grid span of individual items via the span, span_x, span_y properties, by wrapping the items in Grid.Item.

<script>
    import {Box, Grid} from "@kahi-ui/framework";
</script>

<Grid.Container
    class="grid-item-span"
    points={["4", "mobile:2"]}
    spacing="medium"
>
    <Box palette="alert" />
    <Grid.Item
        span_x={["2", "mobile:1"]}
        span_y={["1", "mobile:2"]}
    >
        <Box palette="affirmative" />
    </Grid.Item>
    <Box palette="negative" />

    <Box palette="affirmative" />
    <Box palette="negative" />
    <Box palette="alert" />

    <Box palette="alert" />
    <Box palette="affirmative" />
    <Box palette="negative" />
</Grid.Container>

<style>
    :global(.grid-item-span > *) {
        min-height: 3rem;
    }
</style>

Properties

Grid.Container

Name Description Types
points In a point scale of 1...12, sets how the Grid.Container divides up the space available to the child items.
1 2 3 4 5 6 7 8 9 10 11 12 {VIEWPORT}:{POINTS}
alignment Adjusts where the child items will be placed within the Grid.Container along both axis.
center stretch {VIEWPORT}:{ALIGNMENT}
alignment_x Adjusts where the child items will be placed within the Grid.Container along the horizontal axis.
center stretch left right {VIEWPORT}:{ALIGNMENT}
alignment_y Adjusts where the child items will be placed within the Grid.Container along the vertical axis.
center stretch bottom top {VIEWPORT}:{ALIGNMENT}
spacing Adjusts the visual spacing between child items in the Grid.Container.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_x Adjusts the horizontal visual spacing between child items in the Grid.Container.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_y Adjusts the vertical visual spacing between child items in the Grid.Container.
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}

Grid.Item

Name Description Types
span In a point scale of 1...12, sets how many grid columns and rows the Grid.Item will span.
1 2 3 4 5 6 7 8 9 10 11 12 {VIEWPORT}:{POINTS}
span_x In a point scale of 1...12, sets how many grid columns the Grid.Item will span.
1 2 3 4 5 6 7 8 9 10 11 12 {VIEWPORT}:{POINTS}
span_y In a point scale of 1...12, sets how many grid rows the Grid.Item will span.
1 2 3 4 5 6 7 8 9 10 11 12 {VIEWPORT}:{POINTS}

Slots

Grid.Container

Name Description Types
default Default unnamed slot.
{}

Grid.Item

Name Description Types
default Default unnamed slot.
{}