VGrid
Vuero come with VGrid and VGridItem which are utility components to compose CSS grid layout with ease. The component VGrid will represent the grid container and can contains anything in its slot. The component VGridItem allow to have finest control how the item is positioned inside the VGrid parent.
You can find a complete guide on css-tricks.com
VGrid Props
Here is the full props available for <VGrid /> component:
| Props | Default | Type |
|---|---|---|
| jusitfy-items | initial | start, end, center, stretch, initial |
| align-items | initial | start , end , center , stretch , initial |
| jusitfy-content | initial | start, end, center, stretch, space-around, space-between, space-evenly, initial |
| align-content | initial | start, end, center, stretch, space-around, space-between, space-evenly, initial |
| place-content | normal | string |
| grid-template-columns | none | string |
| grid-template-rows | none | string |
| grid-template-areas | none | string |
| column-gap | normal | string |
| row-gap | normal | string |
| grid-auto-columns | auto | string |
| grid-auto-rows | auto | string |
| grid-auto-flow | row | row, column, row dense, column dense, initial |
| inline | false | boolean |
VGridItem Props
Here is the full props available for <VGridItem /> component:
| Props | Default | Type |
|---|---|---|
| order | 0 | string, number |
| flex-grow | 0 | string, number |
| flex-shrink | 0 | string, number |
| flex-basis | auto | string |
| align-selft | auto | auto, flex-start, flex-end, center, baseline, stretch |
VGrid Slots
Here is the full slots available for <VGrid /> component:
| Slot | Properties | Description |
|---|---|---|
| #default required | null | The flex items |