@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