Phi / Grid

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

<template>
  <Grid variant="2up" gap="base">
    <GridItem>
      <strong>Item 1</strong>
      <span>First grid item</span>
    </GridItem>
    <GridItem>
      <strong>Item 2</strong>
      <span>Second grid item</span>
    </GridItem>
  </Grid>
</template>

Installation

Barrel

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

Granular

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

Grid Variants

The Grid component supports multiple column layouts that adapt responsively across breakpoints.

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

<template>
  <div class="stack">
    <section>
      <p>variant="2up"</p>
      <Grid variant="2up" gap="sm">
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
      </Grid>
    </section>

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

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

Asymmetric Layouts

Use asymmetric variants for sidebar/main content layouts.

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

<template>
  <div class="stack">
    <section>
      <p>variant="2-1" (66% / 33%)</p>
      <Grid variant="2-1" gap="sm">
        <GridItem>
          <strong>Main Content</strong>
          <span>Two-thirds width</span>
        </GridItem>
        <GridItem>
          <strong>Sidebar</strong>
          <span>One-third width</span>
        </GridItem>
      </Grid>
    </section>

    <section>
      <p>variant="1-2" (33% / 66%)</p>
      <Grid variant="1-2" gap="sm">
        <GridItem>
          <strong>Sidebar</strong>
          <span>One-third width</span>
        </GridItem>
        <GridItem>
          <strong>Main Content</strong>
          <span>Two-thirds width</span>
        </GridItem>
      </Grid>
    </section>
  </div>
</template>

Gap Sizes

Control the spacing between grid items with the gap prop.

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

<template>
  <div class="stack">
    <section>
      <p>gap="none"</p>
      <Grid variant="side-by-side" gap="none">
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
      </Grid>
    </section>

    <section>
      <p>gap="sm"</p>
      <Grid variant="side-by-side" gap="sm">
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
      </Grid>
    </section>

    <section>
      <p>gap="base" (default, responsive)</p>
      <Grid variant="side-by-side" gap="base">
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
      </Grid>
    </section>

    <section>
      <p>gap="lg"</p>
      <Grid variant="side-by-side" gap="lg">
        <GridItem>1</GridItem>
        <GridItem>2</GridItem>
      </Grid>
    </section>
  </div>
</template>

Mobile Dividers

Add dividers between items on mobile with the mobileDivider prop (only works with the 4up variant).

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

<template>
  <Grid variant="4up" gap="base" mobile-divider>
    <GridItem>
      <strong>Item 1</strong>
      <span>Has divider on mobile</span>
    </GridItem>
    <GridItem>
      <strong>Item 2</strong>
      <span>Has divider on mobile</span>
    </GridItem>
    <GridItem>
      <strong>Item 3</strong>
      <span>Has divider on mobile</span>
    </GridItem>
    <GridItem>
      <strong>Item 4</strong>
      <span>Has divider on mobile</span>
    </GridItem>
  </Grid>
</template>

All Variants

Reference for all available grid variants:

Variant	Description
`2up`	1 column mobile, 2 columns medium+
`side-by-side`	Always 2 columns
`2-1`	66%/33% split on medium+
`1-2`	33%/66% split on medium+
`1-3up`	1 column mobile, 3 columns large+
`3up`	1 mobile, 2 medium, 3 large
`4up`	Progressive: 1 to 2 to 3 to 4 columns
`6up`	2 mobile, up to 6 on XL
`1-2-4up`	1 mobile, 2 medium, 4 large

API Reference

Grid

Responsive CSS grid layout container with preset column configurations.

Prop	Type	Default	Description
`variant`	`"2up" \| "side-by-side" \| "2-1" \| "1-2" \| "1-3up" \| "3up" \| "4up" \| "6up" \| "1-2-4up"`	`-`	Responsive column layout variant.
`gap`	`"none" \| "sm" \| "base" \| "lg"`	`"base"`	Gap size between grid items.
`mobileDivider`	`boolean`	`false`	Shows dividers between items on mobile when variant is "4up".
`default slot`	`slot`	`-`	GridItem children displayed in the grid.

GridItem

A wrapper component for grid children.

Prop	Type	Default	Description
`default slot`	`slot`	`-`	Content displayed inside the grid cell.