@tornography/vue-columns-grid NPM

vue-columns-grid

This is a vuejs component to replace the commonly used bootstrap grid or the corresponding bootstrap vue components. It's ment to use css grid on the parent, to simplify the usage of common grid setups.

Demo

See a live example of this component.

Usage

import ColumnsGrid from 'vue-columns-grid'

Example

This example shows the usage of all possible properties. See table below to see combinations and overrides.

<columns-grid gap="1em 2em" :columns="3" auto="fill" width="300px">
    <!-- items -->
</columns-grid>

Properties

Poperty	Type	Default Value	Description
columns	Number 2, Array of Numbers 1,3,1	2	Number sets amount of equal width columns. Array sets each number as column with fractional width.
auto	"fill" or "fit"		"fill" let's the grid items span the space that's left over after filling a line. "fit" will leave the space as is. This property makes the columns property beeing ignored.
width	Any valid css value for width	10em	Sets the minmal width a grid item when "auto" property is set.
gap	Any valid css value for grid-gap		Sets the distance between the grid items. Can be a single value like 1em, to set horizonal and vertical spacing. Or you can use multiple values like 1em 3em, to set seperate values for vertical and horizontal spacing.