Crow

Prop Optional Initial Type
gap ✓ undefined integer
horizontal ✓ true boolean
vertical ✓ false boolean
fly ✓ false boolean
up ✓ false boolean
right ✓ false boolean
down ✓ false boolean
left ✓ false boolean
<Crow /> is short for column-row. With it you can create lists, grids and full page layouts.

This component was ported to Svelte from Crow framework.

In order to allow a parent to grow with an undeterministic amount of children make sure to use min-height along with display: grid; & place-items: center;

Grid parents behave differently (and better!) than flex parents.
1
2
3
4
5
Prop Value
gap undefined
horizontal true
vertical false
fly false
up false
right false
down false
left false
<Crow gap={undefined} horizontal={true} vertical={false} fly={false} up={false} right={false} down={false} left={false} > <div>Green</div> <div>Red</div> <div>Pink</div> <div>Blue</div> </Crow>