Grid

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

Basic Usage

Grid

Demo loads on client.

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`	`1`	Columns
rows	`number \| ResponsiveValue`	`auto`	Rows
gap	`number \| string \| ResponsiveValue \| GapValue`	`0`	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
autoRows	`string`	`'auto'`	Auto row height
dense	`boolean`	`false`	Dense layout

GridItem Props

Name	Type	Default	Description
colSpan	`number \| ResponsiveValue`	`1`	Column span
rowSpan	`number \| ResponsiveValue`	`1`	Row span
colStart	`number`	-	Column start
colEnd	`number`	-	Column end
rowStart	`number`	-	Row start
rowEnd	`number`	-	Row end
justifySelf	`'start' \| 'end' \| 'center' \| 'stretch'`	-	Item horizontal alignment
alignSelf	`'start' \| 'end' \| 'center' \| 'stretch'`	-	Item vertical alignment

Types

interface ResponsiveValue {
  xs?: number
  sm?: number
  md?: number
  lg?: number
  xl?: number
  xxl?: number
}

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