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.
See a live example of this component.
import ColumnsGrid from 'vue-columns-grid'
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>
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. |
npm install
npm run serve
npm run build
npm run test
npm run lint
npm run test:unit