Usage

Grid item that spans multiple columns or rows.

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.

<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

Spans 2 columns

1 col

1 col

Spans 2 columns

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