@vuelib/grid

Simple zero-dependency grid for Vue 3

Installation

npm i @vuelib/grid

Example

<template>
  <Grid spacing="8px" column-spacing="10px">
    <GridItem :size="6">First item</GridItem>
    <GridItem :size="6">Second item</GridItem>
    <GridItem :size="12">Third item</GridItem>
  </Grid>
</template>

<script lang="ts" setup>
import { Grid, GridItem } from '@vuelib/grid';
</script>

Props

Grid

| Name | Type | Default | |:---------------:|:-----------------------------------------------------:|:-----------:| | spacing | string \| number | 0 | | rowSpacing | string \| number | 0 | | columnSpacing | string \| number | 0 | | columns | string \| number | 12 | | alignItems | 'start' \| 'center' \| 'end' \| 'stretch' \| 'auto' | 'stretch' | | component | string | 'div' |

GridItem

| Name | Type | Default | |:-----------:|:-----------------------------------------------------:|:--------:| | size | string \| number | 1 | | offset | string \| number | 0 | | alignSelf | 'start' \| 'center' \| 'end' \| 'stretch' \| 'auto' | 'auto' | | component | string | 'div' |

License

MIT