GridLayout

Usage

Card Grid

<template>
  <TxGridLayout min-item-width="240px" gap="16px" :max-columns="3">
    <article v-for="card in cards" :key="card.id" class="tx-grid-layout__item p-4">
      <h3>{{ card.title }}</h3>
      <p>{{ card.description }}</p>
    </article>
  </TxGridLayout>
</template>

Static Grid

Turn off interactive for dense tables, virtualized content, or any grid where pointer movement should not mutate child inline styles.

<template>
  <TxGridLayout :interactive="false" min-item-width="180px" gap="12px">
    <div v-for="metric in metrics" :key="metric.name" class="rounded-xl border p-3">
      {{ metric.name }}
    </div>
  </TxGridLayout>
</template>

Best Practices

• Use TxGridLayout for repeated peer cards. Use TxFlex or TxStack for one-dimensional alignment.
• Add .tx-grid-layout__item only when you want the built-in background, radius, cursor, and spotlight style.
• Disable interactive for very large grids to avoid per-mousemove style updates across many children.
• Keep minItemWidth aligned with the card’s real minimum readable width; do not use it as a spacing hack.
• Avoid nesting interactive grids inside other pointer-heavy surfaces.

API Reference

Props

Slots

Events

No public events are emitted.

Exposed Methods

No public instance methods are exposed.

CSS Variables

Overview

• The root is a block div with CSS Grid layout.
• Columns use repeat(auto-fit, minmax(minItemWidth, 1fr)) by default.
• At viewport widths >= 1400px, columns switch to repeat(maxColumns, 1fr).
• gap, minItemWidth, and maxColumns are written as CSS variables on the root.
• The spotlight effect is applied only to descendants with class .tx-grid-layout__item.
• When interactive=true, mouse movement updates each .tx-grid-layout__item with --tx-grid-op, --tx-grid-x, and --tx-grid-y inline style variables.
• Mouse leave sets --tx-grid-op back to 0.
• When interactive=false, pointer movement and mouse leave handlers return without mutating child styles.

Technologies

• Reviewed against packages/tuffex/packages/components/src/grid-layout/index.ts, TxGridLayout.vue, and grid-layout.test.ts.
• Spotlight variables are written only to descendants with .tx-grid-layout__item; ordinary slotted children remain untouched.
• interactive=false prevents pointer handlers from mutating child inline styles, which is important for large or virtualized grids.
• Component source: packages/tuffex/packages/components/src/grid-layout/src/TxGridLayout.vue.
• Types: packages/tuffex/packages/components/src/grid-layout/index.ts.
• Verified coverage: Coverage: packages/tuffex/packages/components/src/grid-layout/__tests__/grid-layout.test.ts verifies default grid variables and slot content, prop-driven variable updates, and spotlight variables mutating only while interactive.