Grid

The grid creates responsive layouts that adapt to any screen size. Its equal-width columns can be combined and rearranged to build complex page designs.

Props

columns?: number
The amount of columns the grid has.
Default: 12

gap?: number
The gap between columns.
Default: 18

tag?: keyof HTMLElementTagNameMap
The HTML tag to use for the grid.
Default: div

Slots

default
The content of the grid.

Examples

Basic

A basic grid.

Preview

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxGrid
                :gap="21"
                :columns="12">
                <FluxGridColumn
                    class="column-example"
                    :xs="3"/>

                <FluxGridColumn
                    class="column-example"
                    :xs="6"/>

                <FluxGridColumn
                    class="column-example"
                    :xs="3"/>
            </FluxGrid>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxGrid, FluxGridColumn, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

Responsive

Each column accepts breakpoint props (xs, sm, md, lg, xl) so the layout adapts to the viewport.

Preview

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxGrid :columns="12">
                <FluxGridColumn
                    class="column-example"
                    :xs="12"
                    :sm="6"
                    :lg="3"/>

                <FluxGridColumn
                    class="column-example"
                    :xs="12"
                    :sm="6"
                    :lg="3"/>

                <FluxGridColumn
                    class="column-example"
                    :xs="12"
                    :sm="6"
                    :lg="3"/>

                <FluxGridColumn
                    class="column-example"
                    :xs="12"
                    :sm="6"
                    :lg="3"/>
            </FluxGrid>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxGrid, FluxGridColumn, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>

TIP

The class column-example is used in the documentation to display the columns.