Flux

Appearance

Grid ​

Our grid component is a powerful tool for creating responsive layouts that adapt to any screen size. With 12 equal-width columns, it provides maximum flexibility for building complex page designs. You can combine and rearrange the columns to create custom layouts that suit your specific needs.

Props

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

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

Slots

default
The content of the grid.

Examples ​

Basic

A basic grid.

<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.

<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.