Flux

Appearance

Grid column ​

The grid column is used to arrange content within a grid layout. It defines how elements are positioned across the available columns, helping maintain clear alignment and consistent spacing. Using grid columns ensures that content stays organized and visually balanced across different screen sizes.

WARNING

This component only works properly inside Grid or Auto grid.

Props

xs?: number
The column span on the xs breakpoint.
Default: 12

sm?: number
The column span on the sm breakpoint.
Default: 12

md?: number
The column span on the md breakpoint.
Default: 12

lg?: number
The column span on the lg breakpoint.
Default: 12

xl?: number
The column span on the xl breakpoint.
Default: 12

Slots

default
The content of the grid item.

Examples ​

Basic

A basic grid.

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

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

TIP

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