Grid pattern

A stylish SVG grid pattern component that fills any container and can be customized in terms of grid size, positioning, and stroke style. Supports highlighting specific squares.

Props

width?: number
The width of each cell.
Default: 42

height?: number
The height of each cell.
Default: 42

stroke-dasharray?: number
The dasharray of the stroke.

squares?: Array<[x: number, y: number]>
Highlight specific cells.
Default: []

Examples

Free

When used freely, the grid pattern fills its parent container.

Preview

Code

<template>
    <FluxPane variant="flat">
        <FluxAspectRatio :aspect-ratio="21 / 9">
            <FluxGridPattern
                :height="42"
                :width="42"
                :stroke-dasharray="2"
                :squares="[
                    [1, 1],
                    [2, 2],
                    [7, 5],
                    [8, 4]
                ]"/>
        </FluxAspectRatio>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxAspectRatio, FluxGridPattern, FluxPane } from '@flux-ui/flux';
</script>