Grid

Grid provides a modern CSS Grid layout system with responsive and flexible configuration.

Basic Usage

Grid

Demo will load when visible.

<template>
  <div style="width: 520px; padding: 16px; border: 1px solid var(--tx-border-color); border-radius: 12px;">
    <TxGrid :cols="3" :gap="12">
      <TxGridItem v-for="i in 6" :key="i">
        <div style="height: 54px; border-radius: 10px; background: var(--tx-fill-color-light, #f5f7fa); display: flex; align-items: center; justify-content: center; color: var(--tx-text-color-secondary);">
          {{ i }}
        </div>
      </TxGridItem>
    </TxGrid>
  </div>
</template>

Simple grid layout:

<template>
  <TxGrid :cols="3" gap="16">
    <TxGridItem>Item 1</TxGridItem>
    <TxGridItem>Item 2</TxGridItem>
    <TxGridItem>Item 3</TxGridItem>
    <TxGridItem>Item 4</TxGridItem>
    <TxGridItem>Item 5</TxGridItem>
    <TxGridItem>Item 6</TxGridItem>
  </TxGrid>
</template>

Responsive Grid

Responsive columns

<template>
  <TxGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" gap="20">
    <TxGridItem v-for="i in 10" :key="i">
      <TxCard>Item {{ i }}</TxCard>
    </TxGridItem>
  </TxGrid>
</template>

Auto-fit grid

<template>
  <TxGrid min-item-width="250px" gap="24">
    <TxGridItem v-for="item in items" :key="item.id">
      <TxCard>
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </TxCard>
    </TxGridItem>
  </TxGrid>
</template>

Grid Gaps

Uniform gap

<template>
  <TxGrid :cols="3" gap="32">
    <TxGridItem v-for="i in 6" :key="i">
      Item {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

Row / column gaps

<template>
  <TxGrid :cols="3" :gap="{ row: 24, col: 16 }">
    <TxGridItem v-for="i in 6" :key="i">
      Item {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

Responsive gaps

<template>
  <TxGrid
    :cols="{ xs: 1, md: 2, lg: 3 }"
    :gap="{ xs: 16, md: 24, lg: 32 }"
  >
    <TxGridItem v-for="i in 6" :key="i">
      Item {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

Grid Items

Column span

<template>
  <TxGrid :cols="4" gap="16">
    <TxGridItem>Item</TxGridItem>
    <TxGridItem :col-span="2">Span 2</TxGridItem>
    <TxGridItem>Item</TxGridItem>
    <TxGridItem :col-span="3">Span 3</TxGridItem>
    <TxGridItem>Item</TxGridItem>
  </TxGrid>
</template>

Row span

<template>
  <TxGrid :cols="3" gap="16">
    <TxGridItem>Item 1</TxGridItem>
    <TxGridItem :row-span="2">Span 2 rows</TxGridItem>
    <TxGridItem>Item 3</TxGridItem>
    <TxGridItem>Item 4</TxGridItem>
    <TxGridItem>Item 5</TxGridItem>
  </TxGrid>
</template>

Alignment

Grid alignment

<template>
  <TxGrid
    :cols="3"
    gap="16"
    justify="center"
    align="center"
    style="height: 400px;"
  >
    <TxGridItem v-for="i in 3" :key="i">
      Item {{ i }}
    </TxGridItem>
  </TxGrid>
</template>

Item alignment

<template>
  <TxGrid :cols="3" gap="16">
    <TxGridItem justify-self="start">Start</TxGridItem>
    <TxGridItem justify-self="center">Center</TxGridItem>
    <TxGridItem justify-self="end">End</TxGridItem>
  </TxGrid>
</template>

API Reference

Grid Props

Name	Type	Default	Description
cols	`number \| ResponsiveValue<number>`	`0`	Columns; 0 leaves the column template unset
rows	`number`	`0`	Rows; 0 leaves the row template unset
gap	`number \| string \| ResponsiveValue<number \| string> \| GapValue`	`16`	Grid gap
minItemWidth	`string`	-	Min item width (auto-fit)
justify	`'start' \| 'end' \| 'center' \| 'stretch'`	`'stretch'`	Horizontal alignment
align	`'start' \| 'end' \| 'center' \| 'stretch'`	`'stretch'`	Vertical alignment

GridItem Props

Name	Type	Default	Description
colSpan	`number`	`1`	Column span, clamped to at least 1
rowSpan	`number`	`1`	Row span, clamped to at least 1
justifySelf	`'start' \| 'end' \| 'center' \| 'stretch'`	-	Item horizontal alignment
alignSelf	`'start' \| 'end' \| 'center' \| 'stretch'`	-	Item vertical alignment

Types

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

interface ResponsiveValue<T> {
  xs?: number
  sm?: number
  md?: number
  lg?: number
  xl?: number
}

interface GapValue {
  row?: number | string
  col?: number | string
}

Interaction Contract

minItemWidth takes precedence over cols and outputs repeat(auto-fit, minmax(..., 1fr)).
Responsive values are resolved from the current window width with breakpoints xs < 640, sm < 768, md < 1024, lg < 1280, and xl otherwise.
Numeric gap values are converted to px; { row, col } controls row and column gaps separately.
TxGridItem clamps colSpan and rowSpan to at least 1.