Preview Updated 2026-05-10

FormGrid 表单栅格

按容器宽度自适应的栅格布局，支持每个断点指定列数。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

columns 接受固定列数（2）或断点对象（{ sm: 1, md: 2, lg: 3 }）。断点对齐 token：sm 640 / md 768 / lg 1024 / xl 1280。基于 ResizeObserver 监听容器宽度，不依赖 viewport 媒体查询，因此在 drawer / split pane 里也能正确响应。

背景视口

姓

名

昵称

邮箱

电话

城市

src/App.vue

<script setup lang="ts">
import { CfFormGrid, CfFieldRow } from '@chufix-design/vue';
</script>
<template>
  <CfFormGrid :columns="{ sm: 1, md: 2, lg: 3 }" :gap="16">
    <CfFieldRow label="姓"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="名"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="昵称"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="邮箱"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="电话"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="城市"><input class="cf-input" /></CfFieldRow>
  </CfFormGrid>
</template>

<script setup>
import { CfFormGrid, CfFieldRow } from '@chufix-design/vue';
</script>
<template>
  <CfFormGrid :columns="{ sm: 1, md: 2, lg: 3 }" :gap="16">
    <CfFieldRow label="姓"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="名"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="昵称"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="邮箱"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="电话"><input class="cf-input" /></CfFieldRow>
    <CfFieldRow label="城市"><input class="cf-input" /></CfFieldRow>
  </CfFormGrid>
</template>

import { CfFieldRow, CfFormGrid } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfFormGrid columns={{ sm: 1, md: 2, lg: 3 }} gap={16}>
          <CfFieldRow label="姓"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="名"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="昵称"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="邮箱"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="电话"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="城市"><input className="cf-input" /></CfFieldRow>
        </CfFormGrid>
    </>
  );
}

import { CfFieldRow, CfFormGrid } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfFormGrid columns={{ sm: 1, md: 2, lg: 3 }} gap={16}>
          <CfFieldRow label="姓"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="名"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="昵称"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="邮箱"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="电话"><input className="cf-input" /></CfFieldRow>
          <CfFieldRow label="城市"><input className="cf-input" /></CfFieldRow>
        </CfFormGrid>
    </>
  );
}

API

属性	类型	默认	说明
`columns`	`number \| { sm?, md?, lg?, xl? }`	`{ sm: 1, md: 2 }`	列数
`gap`	`number`	`16`	单元间距 (px)