Cols
Cols create equally sized columns to render HTML. This component is equivalent to an horizontal flex where every item has the same size.
To create a cols, use the following code:
<script>
import { Cols } from '@makigas/genshi-svelte';
</script>
<Cols>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</Cols>1
2
3
4
5
6
Density
To change the density of the columns, you can tweak the gap, via the density parameter:
density="gapless"to disable the gap completely.density="compact"to use a compact layout.density="normal"to use the default gap - this is the default value for the parameter.density="cozy"to add more spacing between the elements.
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6