GridLayout

Use GridLayout to arrange repeated cards or panels into an auto-fitting responsive grid. Add tx-grid-layout__item to children when the hover spotlight should be enabled.

Basic Usage

GridLayout

Demo will load when visible.

<template>
  <TxGridLayout>
    <div v-for="i in 6" :key="i" class="tx-grid-layout__item" style="padding: 16px;">
      Item {{ i }}
    </div>
  </TxGridLayout>
</template>

API

Props

Prop	Type	Default	Description
`minItemWidth`	`string`	`'300px'`	Minimum width used by the auto-fit grid columns.
`gap`	`string`	`'1.5rem'`	Gap between grid items.
`maxColumns`	`number`	`4`	Fixed column count used on wide screens (`>= 1400px`).
`interactive`	`boolean`	`true`	Enables the cursor-following hover spotlight for `.tx-grid-layout__item` children.

Notes

Add class tx-grid-layout__item to items to enable hover styles.