Grid

使用法

import {
   __experimentalGrid as Grid,
   __experimentalText as Text,
} from '@wordpress/components';
function Example() {
   return (
   <Grid columns={ 3 }>
   <Text>Code</Text>
   <Text>is</Text>
   <Text>Poetry</Text>
   </Grid>
   );
}

プロパティ

align: CSS[‘alignItems’]

子要素のブロック配置を調整します。

• 必須: いいえ
  

alignment: GridAlignment

子要素の水平方向および垂直方向の配置を調整します。

• 必須: いいえ
  

columnGap: CSSProperties[‘gridColumnGap’]

- 必須: いいえ
 <a name="columns-number"></a>
### columns: number
`````Grid`````の列数を調整します。  
- 必須: いいえ 
- デフォルト: `````2

gap: number

各子要素間の隙間。

• 必須: いいえ
• デフォルト: 3
  

isInline: boolean

CSSの表示をgridからinline-gridに変更します。

• 必須: いいえ
  

justify: CSS[‘justifyContent’]

子要素のインライン配置を調整します。

• 必須: いいえ
  

rowGap: CSSProperties[‘gridRowGap’]

grid-row-gapを調整します。

• 必須: いいえ
  

rows: number

Gridの行数を調整します。

• 必須: いいえ
  

templateColumns: CSS[‘gridTemplateColumns’]

CSSグリッドのtemplate-columnsを調整します。

• 必須: いいえ
  

templateRows: CSS[‘gridTemplateRows’]

CSSグリッドのtemplate-rowsを調整します。

• 必須: いいえ