CSS Grid

透過全套的響應式網格工具，快速管理網格欄、導航、元件等的版面、對齊方式和尺寸設定。

如果您是 網格的新手或不熟悉網格 ，建議您閱讀這篇 CSS-Tricks 網格指南。

父層的屬性

display

若要定義 grid 容器，您必須將 display CSS 屬性指定為下列其中一個值：grid 或 inline-grid。

我是網格容器！

<Box sx={{ display: 'grid' }}>…</Box>
<Box sx={{ display: 'inline-grid' }}>…</Box>

grid-template-rows

grid-template-rows 屬性定義了網格列的線名稱和軌道尺寸函數。

<Box sx={{ display: 'grid', gridTemplateRows: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

<Box sx={{ display: 'grid', gridTemplateRows: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

按下 Enter 開始編輯

grid-template-columns

grid-template-columns 屬性定義了網格欄的線名稱和軌道尺寸函數。

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

按下 Enter 開始編輯

gap

gap: size 屬性指定 CSS 網格內不同項目之間的間隙。

<Box sx={{ display: 'grid', gap: 1, gridTemplateColumns: 'repeat(2, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

<Box sx={{ display: 'grid', gap: 1, gridTemplateColumns: 'repeat(2, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

按下 Enter 開始編輯

row-gap & column-gap

row-gap 和 column-gap CSS 屬性允許獨立指定列和欄的間隙。

<Box
  sx={{
    display: 'grid',
    columnGap: 3,
    rowGap: 1,
    gridTemplateColumns: 'repeat(2, 1fr)',
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

<Box
  sx={{
    display: 'grid',
    columnGap: 3,
    rowGap: 1,
    gridTemplateColumns: 'repeat(2, 1fr)',
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

按下 Enter 開始編輯

grid-template-areas

grid-template-area 屬性透過參照使用 grid-area 屬性指定的網格區域名稱，來定義網格範本。

頁首

主要內容

側邊欄

頁腳

<Box
  sx={{
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 1,
    gridTemplateRows: 'auto',
    gridTemplateAreas: `"header header header header"
  "main main . sidebar"
  "footer footer footer footer"`,
  }}
>
  <Box sx={{ gridArea: 'header', bgcolor: 'primary.main' }}>Header</Box>
  <Box sx={{ gridArea: 'main', bgcolor: 'secondary.main' }}>Main</Box>
  <Box sx={{ gridArea: 'sidebar', bgcolor: 'error.main' }}>Sidebar</Box>
  <Box sx={{ gridArea: 'footer', bgcolor: 'warning.dark' }}>Footer</Box>
</Box>

<Box
  sx={{
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 1,
    gridTemplateRows: 'auto',
    gridTemplateAreas: `"header header header header"
  "main main . sidebar"
  "footer footer footer footer"`,
  }}
>
  <Box sx={{ gridArea: 'header', bgcolor: 'primary.main' }}>Header</Box>
  <Box sx={{ gridArea: 'main', bgcolor: 'secondary.main' }}>Main</Box>
  <Box sx={{ gridArea: 'sidebar', bgcolor: 'error.main' }}>Sidebar</Box>
  <Box sx={{ gridArea: 'footer', bgcolor: 'warning.dark' }}>Footer</Box>
</Box>

按下 Enter 開始編輯

grid-auto-columns

grid-auto-column 屬性指定隱式建立的網格欄軌道或軌道模式的大小。

span 2

4 / 5

<Box sx={{ display: 'grid', gridAutoColumns: '1fr', gap: 1 }}>
  <Item sx={{ gridRow: '1', gridColumn: 'span 2' }}>span 2</Item>
  {/* The second non-visible column has width of 1/4 */}
  <Item sx={{ gridRow: '1', gridColumn: '4 / 5' }}>4 / 5</Item>
</Box>

<Box sx={{ display: 'grid', gridAutoColumns: '1fr', gap: 1 }}>
  <Item sx={{ gridRow: '1', gridColumn: 'span 2' }}>span 2</Item>
  {/* The second non-visible column has width of 1/4 */}
  <Item sx={{ gridRow: '1', gridColumn: '4 / 5' }}>4 / 5</Item>
</Box>

按下 Enter 開始編輯

在上面的演示中，第二個不可見的欄的寬度為 1fr/4，約等於 25%。

grid-auto-rows

grid-auto-rows 屬性指定隱式建立的網格列軌道或軌道模式的大小。

span 2

4 / 5

<Box sx={{ display: 'grid', gridAutoRows: '40px', gap: 1 }}>
  <Item sx={{ gridColumn: '1', gridRow: 'span 2' }}>span 2</Item>
  {/* The second non-visible row has height of 40px */}
  <Item sx={{ gridColumn: '1', gridRow: '4 / 5' }}>4 / 5</Item>
</Box>

<Box sx={{ display: 'grid', gridAutoRows: '40px', gap: 1 }}>
  <Item sx={{ gridColumn: '1', gridRow: 'span 2' }}>span 2</Item>
  {/* The second non-visible row has height of 40px */}
  <Item sx={{ gridColumn: '1', gridRow: '4 / 5' }}>4 / 5</Item>
</Box>

按下 Enter 開始編輯

grid-auto-flow

grid-auto-flow 屬性控制自動放置演算法的工作方式，確切指定自動放置的項目如何流入網格中。

<Box
  sx={{
    display: 'grid',
    gridAutoFlow: 'row',
    gridTemplateColumns: 'repeat(5, 1fr)',
    gridTemplateRows: 'repeat(2, 50px)',
    gap: 1,
  }}
>
  <Item sx={{ gridColumn: '1', gridRow: '1 / 3' }}>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
  <Item sx={{ gridColumn: '5', gridRow: '1 / 3' }}>5</Item>
</Box>

<Box
  sx={{
    display: 'grid',
    gridAutoFlow: 'row',
    gridTemplateColumns: 'repeat(5, 1fr)',
    gridTemplateRows: 'repeat(2, 50px)',
    gap: 1,
  }}
>
  <Item sx={{ gridColumn: '1', gridRow: '1 / 3' }}>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
  <Item sx={{ gridColumn: '5', gridRow: '1 / 3' }}>5</Item>
</Box>

按下 Enter 開始編輯

子層的屬性

grid-column

grid-column 屬性是 grid-column-start + grid-column-end 的縮寫。您可以在 grid-auto-columns 範例中看到它的使用方式。

您可以設定開始和結束線

<Box sx={{ gridColumn: '1 / 3' }}>…

或設定要跨越的欄數

<Box sx={{ gridColumn: 'span 2' }}>…

grid-row

grid-row 屬性是 grid-row-start + grid-row-end 的縮寫。您可以在 grid-auto-rows 範例中看到它的使用方式。

您可以設定開始和結束線

<Box sx={{ gridRow: '1 / 3' }}>…

或設定要跨越的列數

<Box sx={{ gridRow: 'span 2' }}>…

grid-area

grid-area 屬性允許您為項目命名，以便可以使用 grid-template-areas 屬性建立的範本來參照它。您可以在 grid-template-area 範例中看到它的使用方式。

<Box sx={{ gridArea: 'header' }}>…

API

import { grid } from '@mui/system';

匯入名稱	Prop	CSS 屬性	主題鍵
`gap`	`gap`	`gap`	none
`columnGap`	`columnGap`	`column-gap`	none
`rowGap`	`rowGap`	`row-gap`	none
`gridColumn`	`gridColumn`	`grid-column`	none
`gridRow`	`gridRow`	`grid-row`	none
`gridAutoFlow`	`gridAutoFlow`	`grid-auto-flow`	none
`gridAutoColumns`	`gridAutoColumns`	`grid-auto-columns`	none
`gridAutoRows`	`gridAutoRows`	`grid-auto-rows`	none
`gridTemplateColumns`	`gridTemplateColumns`	`grid-template-columns`	none
`gridTemplateRows`	`gridTemplateRows`	`grid-template-rows`	none
`gridTemplateAreas`	`gridTemplateAreas`	`grid-template-areas`	none
`gridArea`	`gridArea`	`grid-area`	none