Kappa / Grid

01 / PLANProject brief

Set scope, owners, and delivery milestones.

02 / REVIEWDecision log

Track feedback, decisions, and final approval.

<script setup>
import { Grid, GridItem } from "@dicehub/kappa/components/grid";
</script>

<template>
  <Grid variant="2up" gap="base">
    <GridItem>
      <article>
        <strong>Plan</strong>
        <p>Set scope, owners, and delivery milestones.</p>
      </article>
    </GridItem>
    <GridItem>
      <article>
        <strong>Review</strong>
        <p>Track decisions, feedback, and final approval.</p>
      </article>
    </GridItem>
  </Grid>
</template>

Installation

Grid is part of the main Kappa package. It uses native CSS Grid and adds no runtime dependency beyond Vue.

Barrel

import { Grid, GridItem } from "@dicehub/kappa";

Granular

import { Grid, GridItem } from "@dicehub/kappa/components/grid";

Usage

Select a preset for a known responsive column pattern. Every track usesminmax(0, 1fr), and every item has a zero logical minimum size, so long content does not force the grid beyond its container.

Primary content

Supporting content

<script setup>
import { Grid, GridItem } from "@dicehub/kappa/components/grid";
</script>

<template>
  <Grid variant="2up">
    <GridItem>Primary content</GridItem>
    <GridItem>Supporting content</GridItem>
  </Grid>
</template>

Composition

Typical part hierarchy

Grid.Root <div | section | ul | ol>
├── Grid.Item <div | article | section | li>
└── Grid.Item <div | article | section | li>

Ark UI does not provide a general layout Grid primitive. Kappa therefore owns the native layout, semantic elements, and visual spacing.

Examples

Responsive Variants

Use progressive presets for equal-width content that gains columns as space allows.

variant="2up"

variant="3up"

variant="4up"

<template>
  <Grid variant="2up" gap="sm">
    <GridItem>1</GridItem>
    <GridItem>2</GridItem>
  </Grid>

  <Grid variant="3up" gap="sm">
    <GridItem>1</GridItem>
    <GridItem>2</GridItem>
    <GridItem>3</GridItem>
  </Grid>

  <Grid variant="4up" gap="sm">
    <GridItem>1</GridItem>
    <GridItem>2</GridItem>
    <GridItem>3</GridItem>
    <GridItem>4</GridItem>
  </Grid>
</template>

Asymmetric Layouts

Use a two-to-one preset when one region has clear visual priority.

variant="2-1"

Main

Two-thirds region

Side

One-third region

variant="1-2"

Side

One-third region

Main

Two-thirds region

<template>
  <Grid variant="2-1" gap="base">
    <GridItem as="article">Main content</GridItem>
    <GridItem as="section">Supporting content</GridItem>
  </Grid>

  <Grid variant="1-2" gap="base">
    <GridItem as="section">Supporting content</GridItem>
    <GridItem as="article">Main content</GridItem>
  </Grid>
</template>

Gap Sizes

The base gap grows from compact mobile spacing to a spacious desktop rhythm.

gap="none"

gap="sm"

gap="base"

gap="lg"

<template>
  <Grid variant="side-by-side" gap="none">…</Grid>
  <Grid variant="side-by-side" gap="sm">…</Grid>
  <Grid variant="side-by-side" gap="base">…</Grid>
  <Grid variant="side-by-side" gap="lg">…</Grid>
</template>

Mobile Dividers

Add mobile-divider to a 4up grid when stacked items need a stronger small-screen boundary. The final item has no trailing line.

01Research

02Design

03Build

04Release

<template>
  <Grid variant="4up" gap="base" mobile-divider>
    <GridItem>Research</GridItem>
    <GridItem>Design</GridItem>
    <GridItem>Build</GridItem>
    <GridItem>Release</GridItem>
  </Grid>
</template>

Semantic List

Render the root as a list and each item as a list item when the content is a collection.

Avery MorganProduct · 01
Jordan LeeDesign · 02
Sam RiveraEngineering · 03

<template>
  <Grid as="ul" variant="3up" gap="sm" aria-label="Team members">
    <GridItem as="li">Avery Morgan</GridItem>
    <GridItem as="li">Jordan Lee</GridItem>
    <GridItem as="li">Sam Rivera</GridItem>
  </Grid>
</template>

All Variants

Arrows show how the column count changes from the smallest to the largest breakpoint.

Variant	Layout	Use
`2up`	`1 → 2`	General two-column content.
`side-by-side`	`2`	Two columns at every width.
`2-1`	`1 → 2:1`	Main content before a narrow side region.
`1-2`	`1 → 1:2`	Narrow side region before main content.
`1-3up`	`1 → 3`	Three columns only at the large breakpoint.
`3up`	`1 → 2 → 3`	Progressive three-column content.
`4up`	`1 → 2 → 3 → 4`	Progressive four-column content.
`6up`	`2 → 3 → 4 → 6`	Dense metrics or compact items.
`1-2-4up`	`1 → 2 → 4`	Four columns without the three-column step.

Accessibility

Grid controls visual layout only. It does not add a widget role or keyboard behavior.
Use as="ul" or as="ol" with GridItem as="li" for list content.
Use section or article only when the content meets native HTML sectioning rules.
Keep the DOM order meaningful. Responsive columns do not change reading or keyboard order.
Mobile divider lines remain visible in forced-colors mode.

API Reference

Grid

Responsive container. Native attributes, data attributes, and consumer classes pass to the rendered root.

Prop	Type	Default	Description
`as`	`"div" \| "section" \| "ul" \| "ol"`	`"div"`	Native element rendered by the grid container.
`variant`	`"2up" \| "side-by-side" \| "2-1" \| "1-2" \| "1-3up" \| "3up" \| "4up" \| "6up" \| "1-2-4up"`	`undefined`	Responsive column layout preset. Omit it for the browser's single implicit column.
`gap`	`"none" \| "sm" \| "base" \| "lg"`	`"base"`	Space between items. Base grows across responsive breakpoints.
`mobileDivider`	`boolean`	`false`	Shows dividers between stacked items on small screens for the "4up" preset.
`default slot`	`slot`	`—`	GridItem children.

GridItem

Min-width-safe item that consumes mobile-divider state from its nearest Grid root.

Prop	Type	Default	Description
`as`	`"div" \| "article" \| "section" \| "li"`	`"div"`	Native element rendered by the item.
`default slot`	`slot`	`—`	Content inside the grid cell.

Data Slots

Slot	Element	Description
`grid`	`dynamic`	Responsive grid container.
`grid-item`	`dynamic`	Min-width-safe grid item.

Data Attributes

Attribute	Value	Description
`data-variant`	`GridVariant`	Resolved column preset. Absent when no preset is set.
`data-gap`	`GridGap`	Resolved gap preset.
`data-mobile-divider`	`""`	Present on the opted-in root and participating GridItem parts.

Exports

Export	Description
`Grid`	Compound Grid root with Grid.Root and Grid.Item.
`GridRoot`	Named responsive grid container.
`GridItem`	Named min-width-safe grid item.
`GridProps / GridRootProps`	Public root prop contracts.
`GridItemProps`	Public item prop contract.
`GridVariant / GridGap`	Supported layout and spacing values.
`GRID_VARIANTS / GRID_GAPS`	Supported preset metadata.
`resolveGridVariant / resolveGridGap`	Safe runtime resolvers.