0.0.0-alpha.6 • Published 14 days ago
@zhowiny/grid-layout v0.0.0-alpha.6
What's the grid-layout
How to use
In HTML
<script type="module" src="/dist/grid-layout.js" />
<grid-layout
data-rows="['50px', '1fr']"
data-cols="['300px','1fr']"
data-gap="8"
>
<div>A</div>
<div>B</div>
<div>C</div>
</grid-layout>
In Svelte
<script>
import 'grid-layout';
</script>
<grid-layout
class="aspect-video border border-primary-focus/30"
gap={2}
layout="{[
{x: 0, y: 0, w: 3, h: 6},
{x: 3, y: 0, w: 6, h: 2},
{x: 3, y: 2, w: 6, h: 3},
{x: 3, y: 5, w: 6, h: 1},
]}"
>
<div class="bg-primary-focus/30"></div>
<div class="bg-primary-focus/30"></div>
<div class="bg-primary-focus/30"></div>
<div class="bg-primary-focus/30"></div>
</grid-layout>
Props
0.0.0-alpha.6
14 days ago
0.0.0-alpha.5
22 days ago
0.0.0-alpha.3
24 days ago
0.0.0-alpha.4
24 days ago
0.0.0-alpha.2
4 months ago
0.0.0-alpha.1
6 months ago