FaLayoutGrid

Selects breakpoints using the container width, not the global window width. Suitable for resizable drawers, dialogs, forms and table search areas.

Basic

View code

Vue

<template>
	<FaLayoutGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" :gap="16">
		<FaLayoutGridItem v-for="item in 5" :key="item">
			<div class="demo-grid-card">第 {{ item }} 项</div>
		</FaLayoutGridItem>
		<FaLayoutGridItem :span="2" :xs="{ span: 1 }">
			<div class="demo-grid-card">桌面占两列，手机占一列</div>
		</FaLayoutGridItem>
	</FaLayoutGrid>
</template>

Breakpoint

View code

Vue

<template>
	<div class="demo-stack">
		<ElAlert :closable="false" :title="`当前容器断点：${breakpoint}`" type="info" />
		<FaLayoutGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" :gap="12" @breakpoint-change="breakpoint = $event.breakpoint">
			<FaLayoutGridItem v-for="item in 5" :key="item"
				><div class="demo-grid-card">{{ item }}</div></FaLayoutGridItem
			>
		</FaLayoutGrid>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const breakpoint = ref("等待布局计算");
</script>

Collapsed

View code

Vue

<template>
	<FaLayoutGrid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }" :gap="[16, 12]" :collapsed="collapsed" :collapsed-rows="1">
		<FaLayoutGridItem v-for="item in 8" :key="item" :index="item - 1">
			<div class="demo-grid-card">筛选项 {{ item }}</div>
		</FaLayoutGridItem>
		<FaLayoutGridItem suffix :span="1">
			<ElButton type="primary" @click="collapsed = !collapsed">{{ collapsed ? "展开" : "收起" }}</ElButton>
		</FaLayoutGridItem>
	</FaLayoutGrid>
</template>

<script setup lang="ts">
import { ref } from "vue";

const collapsed = ref(true);
</script>

FaLayoutGrid Complete API

Props (4)

Property	Source	Description	Type	Default
cols	Fast addition	Column counts at responsive breakpoints.	String / Number / Object	{"xs":1,"sm":2,"md":3,"lg":4,"xl":5}
collapsed	Fast addition	Enable collapsed-layout calculation.	Boolean	false
collapsedRows	Fast addition	Rows retained when collapsed.	String / Number	1
gap	Fast addition	Horizontal and vertical grid gaps.	Number / Array	0

Events（1）

Name	Source	Description	Parameters / type
breakpointChange	Fast addition	Emitted when container width crosses a responsive breakpoint, with the new breakpoint name.	—

Slots（1）

Name	Source	Description	Parameters / type
default	Fast addition	Default component content.	—

Expose（1）

Name	Source	Description	Parameters / type
breakpoint	Fast addition	Current container breakpoint.	—

Related component: FaLayoutGridItem

Supports base span, offset, a trailing suffix item and independent xs, sm, md, lg and xl overrides.

Offset Suffix

View code

Vue

<template>
	<FaLayoutGrid :cols="{ xs: 1, sm: 3, md: 4, lg: 5, xl: 6 }" :gap="16">
		<FaLayoutGridItem :span="2" :xs="{ span: 1 }"><div class="demo-grid-card">span=2，手机 span=1</div></FaLayoutGridItem>
		<FaLayoutGridItem :span="1" :offset="1" :xs="{ span: 1, offset: 0 }"><div class="demo-grid-card">offset=1</div></FaLayoutGridItem>
		<FaLayoutGridItem suffix :span="1"><div class="demo-grid-card">suffix 贴齐末列</div></FaLayoutGridItem>
	</FaLayoutGrid>
</template>

FaLayoutGridItem Complete API

Props (8)

Property	Source	Description	Type	Default
offset	Fast addition	Offset or overlay offset.	String / Number	0
span	Fast addition	Grid columns occupied.	String / Number	1
suffix	Fast addition	Treat as the trailing layout action item.	Boolean	false
xs	Fast addition	Layout at the xs breakpoint.	Object	—
sm	Fast addition	Layout at the sm breakpoint.	Object	—
md	Fast addition	Layout at the md breakpoint.	Object	—
lg	Fast addition	Layout at the lg breakpoint.	Object	—
xl	Fast addition	Layout at the xl breakpoint.	Object	—

Events（0）

Name	Source	Description	Parameters / type
No runtime Emits declarations.

Slots（1）

Name	Source	Description	Parameters / type
default	Fast addition	Default component content.	—

Expose（1）

Name	Source	Description	Parameters / type
show	Fast addition	Current layout-item visibility.	—

Breakpoint ranges

Breakpoint	Container width
xs	0 - 479px
sm	480 - 768px
md	> 768 - 1024px
lg	> 1024 - 1440px
xl	> 1440px