Grid 栅格
@lark-ui/core

Grid 栅格

用于把内容组织成多列的响应式栅格布局组件。

项目 1

第一个栅格项

项目 2

第二个栅格项

import { Grid, GridItem, Surface, Text } from "@lark-ui/core";

export function GridDemo() {
  return (
    <Grid variant="2up" gap="base">
      <GridItem>
        <Surface className="rounded-lg p-4">
          <Text bold>项目 1</Text>
          <div className="mt-1">
            <Text variant="secondary">第一个栅格项</Text>
          </div>
        </Surface>
      </GridItem>
      <GridItem>
        <Surface className="rounded-lg p-4">
          <Text bold>项目 2</Text>
          <div className="mt-1">
            <Text variant="secondary">第二个栅格项</Text>
          </div>
        </Surface>
      </GridItem>
    </Grid>
  );
}

安装

import { Grid, GridItem } from "@lark-ui/core";

栅格变体

栅格（Grid）组件支持多种列布局，并能响应式地适配各个断点。

variant="2up"

1

2

variant="3up"

1

2

3

variant="4up"

1

2

3

4

import { Grid, GridItem, Surface, Text } from "@lark-ui/core";

export function GridVariantsDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div>
        <p className="mb-2 text-lark-subtle">variant="2up"</p>
        <Grid variant="2up" gap="sm">
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>1</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>2</Text>
            </Surface>
          </GridItem>
        </Grid>
      </div>

      <div>
        <p className="mb-2 text-lark-subtle">variant="3up"</p>
        <Grid variant="3up" gap="sm">
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>1</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>2</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>3</Text>
            </Surface>
          </GridItem>
        </Grid>
      </div>

      <div>
        <p className="mb-2 text-lark-subtle">variant="4up"</p>
        <Grid variant="4up" gap="sm">
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>1</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>2</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>3</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>4</Text>
            </Surface>
          </GridItem>
        </Grid>
      </div>
    </div>
  );
}

非对称布局

侧边栏/主体内容等布局请使用非对称变体。

variant="2-1"（66% / 33%）

主要内容

三分之二宽度

侧边栏

三分之一宽度

variant="1-2"（33% / 66%）

侧边栏

三分之一宽度

主要内容

三分之二宽度

import { Grid, GridItem, Surface, Text } from "@lark-ui/core";

export function GridAsymmetricDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div>
        <p className="mb-2 text-lark-subtle">variant="2-1"（66% / 33%）</p>
        <Grid variant="2-1" gap="sm">
          <GridItem>
            <Surface className="rounded-lg p-4">
              <Text bold>主要内容</Text>
              <div className="mt-1">
                <Text variant="secondary">三分之二宽度</Text>
              </div>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4">
              <Text bold>侧边栏</Text>
              <div className="mt-1">
                <Text variant="secondary">三分之一宽度</Text>
              </div>
            </Surface>
          </GridItem>
        </Grid>
      </div>

      <div>
        <p className="mb-2 text-lark-subtle">variant="1-2"（33% / 66%）</p>
        <Grid variant="1-2" gap="sm">
          <GridItem>
            <Surface className="rounded-lg p-4">
              <Text bold>侧边栏</Text>
              <div className="mt-1">
                <Text variant="secondary">三分之一宽度</Text>
              </div>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4">
              <Text bold>主要内容</Text>
              <div className="mt-1">
                <Text variant="secondary">三分之二宽度</Text>
              </div>
            </Surface>
          </GridItem>
        </Grid>
      </div>
    </div>
  );
}

间距尺寸

使用 gap 属性控制栅格项之间的间距。

gap="none"

1

2

gap="sm"

1

2

gap="base"（默认，自适应）

1

2

gap="lg"

1

2

import { Grid, GridItem, Surface, Text } from "@lark-ui/core";

export function GridGapDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div>
        <p className="mb-2 text-lark-subtle">gap="none"</p>
        <Grid variant="side-by-side" gap="none">
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>1</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>2</Text>
            </Surface>
          </GridItem>
        </Grid>
      </div>

      <div>
        <p className="mb-2 text-lark-subtle">gap="sm"</p>
        <Grid variant="side-by-side" gap="sm">
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>1</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>2</Text>
            </Surface>
          </GridItem>
        </Grid>
      </div>

      <div>
        <p className="mb-2 text-lark-subtle">gap="base"（默认，自适应）</p>
        <Grid variant="side-by-side" gap="base">
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>1</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>2</Text>
            </Surface>
          </GridItem>
        </Grid>
      </div>

      <div>
        <p className="mb-2 text-lark-subtle">gap="lg"</p>
        <Grid variant="side-by-side" gap="lg">
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>1</Text>
            </Surface>
          </GridItem>
          <GridItem>
            <Surface className="rounded-lg p-4 text-center">
              <Text>2</Text>
            </Surface>
          </GridItem>
        </Grid>
      </div>
    </div>
  );
}

移动端分隔线

使用 mobileDivider 属性在移动端的栅格项之间添加分隔线（仅对 4up 变体有效）。

项目 1

移动端显示分隔线

项目 2

移动端显示分隔线

项目 3

移动端显示分隔线

项目 4

移动端显示分隔线

import { Grid, GridItem, Surface, Text } from "@lark-ui/core";

export function GridMobileDividerDemo() {
  return (
    <Grid variant="4up" gap="base" mobileDivider>
      <GridItem>
        <Surface className="rounded-lg p-4">
          <Text bold>项目 1</Text>
          <div className="mt-1">
            <Text variant="secondary">移动端显示分隔线</Text>
          </div>
        </Surface>
      </GridItem>
      <GridItem>
        <Surface className="rounded-lg p-4">
          <Text bold>项目 2</Text>
          <div className="mt-1">
            <Text variant="secondary">移动端显示分隔线</Text>
          </div>
        </Surface>
      </GridItem>
      <GridItem>
        <Surface className="rounded-lg p-4">
          <Text bold>项目 3</Text>
          <div className="mt-1">
            <Text variant="secondary">移动端显示分隔线</Text>
          </div>
        </Surface>
      </GridItem>
      <GridItem>
        <Surface className="rounded-lg p-4">
          <Text bold>项目 4</Text>
          <div className="mt-1">
            <Text variant="secondary">移动端显示分隔线</Text>
          </div>
        </Surface>
      </GridItem>
    </Grid>
  );
}

全部变体

所有可用栅格变体一览：

变体说明
2up移动端 1 列，中等及以上断点 2 列
side-by-side始终 2 列
2-1中等及以上断点按 66%/33% 分配
1-2中等及以上断点按 33%/66% 分配
1-3up移动端 1 列，大型及以上断点 3 列
3up移动端 1 列，中等断点 2 列，大型断点 3 列
4up渐进式：1 → 2 → 3 → 4 列
6up移动端 2 列，XL 断点最多 6 列
1-2-4up移动端 1 列，中等断点 2 列，大型断点 4 列

API 参考

Grid

属性类型默认值说明
childrenReactNode-要渲染的栅格项。
classNamestring-通过 `cn()` 合并的额外 CSS 类名。
idstring--
langstring--
titlestring--
mobileDividerboolean-在移动端显示栅格项之间的分隔线（仅对 `"4up"` 变体有效）。
gap"none" | "sm" | "base" | "lg""base"栅格项之间的间距。 - `"none"` — 无间距 - `"sm"` — 12px 间距 - `"base"` — 响应式间距（8px → 24px → 32px） - `"lg"` — 32px 间距
variant"2up" | "side-by-side" | "2-1" | "1-2" | "1-3up" | "3up" | "4up" | "6up" | "1-2-4up"-响应式列布局变体。 - `"2up"` — 1 列 → md 断点下 2 列 - `"side-by-side"` — 始终 2 列 - `"2-1"` — md 断点下 66%/33% 分栏 - `"1-2"` — md 断点下 33%/66% 分栏 - `"3up"` — 1 → 2 → 3 列 - `"4up"` — 1 → 2 → 3 → 4 列 - `"6up"` — 2 → 3 → 4 → 6 列 - `"1-2-4up"` — 1 → 2 → 4 列

GridItem

GridItem 是栅格子元素的包装组件。它接受标准的 div 属性，包括 className 和 children。