Grid

Grid 组件充当通用容器，包裹要排列的元素。

简介

Grid 组件基于 12 列的网格布局，在布局之间创建视觉一致性，同时允许各种设计的灵活性。

基础知识

import Grid from '@mui/joy/Grid';

列宽是介于 1 和 12 之间的整数值。例如，size={6} 的项目占用网格容器宽度的一半。

size=8

size=4

size=8

<Grid container spacing={2} sx={{ flexGrow: 1 }}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2} sx={{ flexGrow: 1 }}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

自定义

具有多个断点的 Grid

组件可以定义多个宽度，从而导致布局在定义的断点处发生变化。为较大断点给出的宽度值会覆盖为较小断点给出的宽度值。

例如，当视口宽度为 600 像素或更大时，size={{ xs: 12, sm: 6 }} 将组件的大小调整为占用视口宽度的一半（6 列）。对于较小的视口，组件将填充所有 12 个可用列。

xs=6 md=8

xs=6 md=4

xs=6 md=8

<Grid container spacing={2} sx={{ flexGrow: 1 }}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2} sx={{ flexGrow: 1 }}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

间距

要控制子项之间的空间，请使用 spacing 属性。 spacing 值可以是任何正数，包括小数和任何字符串。该属性使用 theme.spacing() 助手转换为 CSS 属性。

行和列间距

rowSpacing 和 columnSpacing 属性允许独立指定行和列间隙。它类似于 CSS Grid 的 row-gap 和 column-gap 属性。

响应式值

您可以根据活动的断点切换属性的值。

<Grid
  container
  spacing={{ xs: 2, md: 3 }}
  columns={{ xs: 4, sm: 8, md: 12 }}
  sx={{ flexGrow: 1 }}
>
  {Array.from(Array(6)).map((_, index) => (
    <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
      <Item>{index + 1}</Item>
    </Grid>
  ))}
</Grid>

<Grid
  container
  spacing={{ xs: 2, md: 3 }}
  columns={{ xs: 4, sm: 8, md: 12 }}
  sx={{ flexGrow: 1 }}
>
  {Array.from(Array(6)).map((_, index) => (
    <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }}>
      <Item>{index + 1}</Item>
    </Grid>
  ))}
</Grid>

按 Enter 开始编辑

以下属性支持响应式值：

size
columns
columnSpacing
direction
rowSpacing
spacing
offset
MUI System 的所有其他属性

当使用响应式 columns 属性时，每个网格项都需要其对应的断点。例如，这不起作用。网格项缺少 md 的值

<Grid container columns={{ xs: 4, md: 12 }}>
  <Grid size={{ xs: 2 }} />
</Grid>

自动布局

自动布局使网格项公平地共享可用空间。这也意味着您可以设置一个网格项的宽度，其他网格项将自动调整大小以适应它。

size=grow

size=6

size=grow

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

可变宽度内容

将 size 断点属性之一设置为 "auto" 以根据其内容的自然宽度渲染列。

size=auto

size=6

size=grow

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size="auto">
    <Item>size=auto</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size="auto">
    <Item>size=auto</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

列数

您可以使用 columns 属性更改默认列数 (12)。

size=8

<Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

按 Enter 开始编辑

系统属性

交互式演示

下面是一个交互式演示，可让您探索不同设置的视觉效果

单元格 1

单元格 2

单元格 3

<Grid
  container
  direction="row"
  sx={{
    justifyContent: "center",
    alignItems: "center",
  }}
>

局限性

负边距

项目之间的间距是通过负边距实现的。这可能会导致意外的行为。例如，要应用背景颜色，您需要将 display: flex; 应用于父元素。

direction: column | column-reverse

在 direction="column" 和 direction="column-reverse" 容器中不支持 size 和 offset 属性。

它们定义了组件在给定断点将使用的网格数。它们旨在控制 row 容器中使用 flex-basis 的宽度，但它们会影响 column 容器中的高度。如果使用这些属性，可能会对 Grid 项目元素的高度产生不良影响。

CSS Grid 布局

Grid 组件在内部使用 CSS flexbox。但如下所示，您可以轻松使用 MUI System 和 CSS Grid 来布局您的页面。

size=8

size=4

size=8

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>size=8</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>size=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>size=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>size=8</Item>
  </Box>
</Box>

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>size=8</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>size=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 4' }}>
    <Item>size=4</Item>
  </Box>
  <Box sx={{ gridColumn: 'span 8' }}>
    <Item>size=8</Item>
  </Box>
</Box>

按 Enter 开始编辑

常见示例

居中子元素

要使网格项的内容居中，请直接在项目上指定 display="flex"。然后使用 justifyContent 和/或 alignItems 调整内容的位置，如下所示

Jimmy

Michal

Jun

Marija

解剖结构

Grid 组件由单个根 <div> 元素组成

<div class="MuiGrid-root">
  <!-- Grid contents -->
</div>

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

<Grid />