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>