Flux

Appearance

Auto grid ​

The Auto grid component is a Vue component that automatically adjusts the width of its children to ensure they have a minimum width. It intelligently determines the number of columns that fit best within the parent container, making it easy to create responsive layouts that adapt to various screen sizes.

Props

gap?: number
The gap between each column.
Default: 30

min-column-width?: number
The minimum width of each column.

Slots

default
The content to be displayed in the grid.

Examples ​

Basic

A basic auto grid.

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxAutoGrid
                :gap="21"
                :min-column-width="200">
                <div class="column-example"></div>
                <div class="column-example"></div>
                <div class="column-example"></div>
                <div class="column-example"></div>
            </FluxAutoGrid>
        </FluxPaneBody>
    </FluxPane>
</template>

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

TIP

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