# Grid Span

## Usage

Grid item that spans multiple columns or rows.

```ts
import { GridSpan } from '@astryx-vue/core/Grid'
```

`GridSpan` wraps one child of a `Grid` and changes how many tracks that child takes. `columns` is a number of columns, or `full` to span the whole row; `rows` is a number of rows. Everything else about the grid — the column count, the gaps, the alignment — stays on `Grid`.

`full` renders `grid-column: 1 / -1`, so it spans the row whatever the column count is. A row span needs a height to work with: give `Grid` a `rowHeight`, or the row grows to fit the tallest item that crosses it.

```vue
<script setup lang="ts">
import { Grid, GridSpan } from '@astryx-vue/core/Grid'
</script>

<template>
  <Grid :columns="3" :gap="3">
    <GridSpan :columns="2">
      Spans two columns
    </GridSpan>
    <div>Regular item</div>
    <GridSpan columns="full">
      Spans the full row
    </GridSpan>
  </Grid>
</template>
```

## Examples

Common configurations, variations, and states.

### Columns

Grid items spanning two of three columns. Wrap a grid child in GridSpan to make it occupy multiple columns for asymmetric layouts.

```vue
<script setup lang="ts">
import { Card } from '@astryx-vue/core/Card'
import { Grid, GridSpan } from '@astryx-vue/core/Grid'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <Grid :columns="3" :gap="3" width="100%">
    <GridSpan :columns="2">
      <Card :height="80">
        <Text type="body" color="secondary">
          Spans 2 columns
        </Text>
      </Card>
    </GridSpan>
    <Card :height="80">
      <Text type="body" color="secondary">
        1 col
      </Text>
    </Card>
    <Card :height="80">
      <Text type="body" color="secondary">
        1 col
      </Text>
    </Card>
    <GridSpan :columns="2">
      <Card :height="80">
        <Text type="body" color="secondary">
          Spans 2 columns
        </Text>
      </Card>
    </GridSpan>
  </Grid>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `columns` | `number \| 'full'` | — | Number of columns to span, rendered as `grid-column: span N`. `'full'` renders `grid-column: 1 / -1`, which spans the row whatever the column count is. |
| `rows` | `number` | — | Number of rows to span, rendered as `grid-row: span N`. |

Leave both out and the item keeps a single cell.

## Slots

- `default`: the content of the spanning item.

## Template ref

`GridSpan` exposes `element`.
Its type is `HTMLDivElement | null`.

## Native attributes

The root element receives HTML attributes, `aria-*` attributes, `data-*` attributes, `class`, and `style`. `class` is merged with the component's own classes. When <code>style</code> and <code>columns</code> or <code>rows</code> both set the same property, the props win.