GridLegacy

Material Design 的響應式版面配置格線可適應螢幕尺寸和方向，確保版面配置之間的一致性。

格線在版面配置之間建立視覺一致性，同時允許各種設計之間的彈性。Material Design 的響應式 UI 是基於 12 欄格線版面配置。

運作方式

格線系統是使用 GridLegacy 元件實作的

它使用 CSS 的彈性盒模型，以實現高度的彈性。
有兩種版面配置類型：容器和項目。
項目寬度以百分比設定，因此它們始終是流動的，並且尺寸相對於其父元素。
項目具有 padding，以在個別項目之間建立間距。
有五個格線斷點：xs、sm、md、lg 和 xl。
可以為每個斷點提供整數值，指示當視窗寬度滿足斷點約束時，元件佔用了 12 個可用欄位中的多少個。

如果您不熟悉或不了解 flexbox，我們建議您閱讀這份 CSS-Tricks flexbox 指南。

流動格線

流動格線使用可縮放和調整內容大小的欄位。流動格線的版面配置可以使用斷點來判斷版面配置是否需要大幅變更。

基本格線

欄位寬度是介於 1 到 12 之間的整數值；它們適用於任何斷點，並指示元件佔用了多少欄位。

傳遞給任何給定斷點的值也適用於所有更寬的斷點（如果它們沒有明確定義的值）。例如，xs={12} 將元件調整大小以佔用其父容器的完整寬度，而與視窗大小無關。

xs=8

xs=4

xs=8

<Grid container spacing={2}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

具有多個斷點的格線

元件可以定義多個寬度，導致版面配置在定義的斷點處變更。給定較大斷點的寬度值會覆蓋給定較小斷點的寬度值。

例如，當視窗寬度為600 像素或更大時，xs={12} sm={6} 將元件調整大小以佔用視窗寬度的一半（6 欄）。對於較小的視窗，元件會填滿所有 12 個可用欄位。

xs=6 md=8

xs=6 md=4

xs=6 md=8

<Grid container spacing={2}>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item 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 rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid item xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid item xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

響應式值

您可以根據作用中的斷點切換屬性的值。例如，我們可以實作 Material Design 的「建議」響應式版面配置格線。

xs=2

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

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

按下 Enter 開始編輯

響應式值由以下項目支援

columns
columnSpacing
direction
rowSpacing
spacing
MUI System 的所有其他屬性

當使用響應式 columns 屬性時，每個格線項目都需要其對應的斷點。例如，這無法運作。格線項目遺失了 md 的值

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

互動式

以下是一個互動式示範，可讓您探索不同設定的視覺結果

儲存格 1

儲存格 2

儲存格 3

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

自動版面配置

自動版面配置使項目平均分享可用空間。這也表示您可以設定一個項目的寬度，而其他項目將自動調整大小以環繞它。

xs=6

<Grid container spacing={3}>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

可變寬度內容

將其中一個尺寸斷點屬性設定為 "auto" 而不是 true / number，以根據其內容的自然寬度調整欄位大小。

可變寬度內容

xs=6

<Grid container spacing={3}>
  <Grid item xs="auto">
    <Item>variable width content</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs="auto">
    <Item>variable width content</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

複雜格線

以下示範不符合 Material Design 指南，但說明瞭如何使用格線來建構複雜的版面配置。

標準授權

完整解析度 1920x1080 • JPEG

ID：1030114

移除

$19.00

巢狀格線

container 和 item 屬性是兩個獨立的布林值；它們可以組合在一起，以允許 Grid 元件同時作為彈性容器和子元件。

https://www.w3.org/TR/css-flexbox-1/#box-model

項目

<Grid container spacing={1}>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
</Grid>

<Grid container spacing={1}>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
</Grid>

按下 Enter 開始編輯

⚠️ 同時為作為彈性容器、彈性項目且具有間距的 Grid 元素定義明確的寬度會導致非預期的行為，請避免這樣做

<Grid spacing={1} container item xs={12}>

如果您需要這樣做，請移除其中一個屬性。

欄位

您可以使用 columns 屬性變更預設欄位數 (12)。

xs=8

<Grid container spacing={2} columns={16}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2} columns={16}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

限制

負邊距

項目之間的間距是使用負邊距實作的。這可能會導致非預期的行為。例如，若要套用背景顏色，您需要將 display: flex; 套用至父元件。

white-space: nowrap

彈性項目的初始設定為 min-width: auto。當子元件使用 white-space: nowrap; 時，這會導致定位衝突。您可以使用以下程式碼重現此問題

<Grid item xs>
  <Typography noWrap>

為了使項目保持在容器內，您需要設定 min-width: 0。實際上，您可以設定 zeroMinWidth 屬性

<Grid item xs zeroMinWidth>
  <Typography noWrap>

截斷應有條件地適用於此長文字行，因為此行比容器可以支援的長度還要長。

direction: column | column-reverse

xs、sm、md、lg 和 xl 屬性在 direction="column" 和 direction="column-reverse" 容器內不受支援。

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

CSS Grid Layout

GridLegacy 元件在內部使用 CSS flexbox。但是如下所示，您可以輕鬆使用 MUI System 和 CSS Grid 來版面配置您的頁面。

xs=8

xs=4

xs=8

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

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

按下 Enter 開始編輯

系統屬性

API

請參閱以下文件，以取得此處提及之元件可用的所有屬性和類別的完整參考。

<GridLegacy />