# 网格跨列

## 使用方法

占多列或多行的网格项。

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

`GridSpan` 包住 `Grid` 里的一个子项，改的是这个子项占几条轨道。`columns` 写数字就是占几列，写 `full` 就是占满整行；`rows` 是占几行。网格本身的东西——列数、间距、对齐——还是由 `Grid` 管。

`full` 渲染成 `grid-column: 1 / -1`，不管一共几列都能占满一行。跨行要有高度才看得出效果：给 `Grid` 传 `rowHeight` 固定行高；不传的话，被跨过的那几行会按穿过它的最高那一项撑开。

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

<template>
  <Grid :columns="3" :gap="3">
    <GridSpan :columns="2">
      占两列
    </GridSpan>
    <div>普通项</div>
    <GridSpan columns="full">
      占满整行
    </GridSpan>
  </Grid>
</template>
```

## 示例

### 跨列

三列里有两项各占两列。想让网格子项占多列、排出不对称的布局时，就用 GridSpan 包一层。

```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>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `columns` | `number \| 'full'` | — | 占几列，渲染成 `grid-column: span N`。写 `'full'` 渲染成 `grid-column: 1 / -1`，不管一共几列都能占满一行。 |
| `rows` | `number` | — | 占几行，渲染成 `grid-row: span N`。 |

两个都不写，这一项就只占一格。

## 插槽

- `default`：这一项的内容。

## 模板引用

`GridSpan` 公开 `element`。
类型为 `HTMLDivElement | null`。

## 原生属性

根元素会接收 HTML 属性、`aria-*` 属性、`data-*` 属性、`class` 和 `style`。`class` 会和组件自己的类合并。`style` 和 `columns`、`rows` 写到同一个属性上时，以属性为准。