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 屬性。間距值可以是任何正數，包括小數和任何字串。該屬性會使用 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
間距
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

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

它們定義元件將針對給定斷點使用的網格數。它們旨在於 row 容器中使用 flex-basis 控制寬度，但它們會影響 column 容器中的高度。如果使用這些屬性，可能會對 Grid 項目元素的高度產生不良影響。

CSS Grid Layout

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 />