React - グリッド

※本ブログではMUIを利用してグリッドを実装した

グリッド

定義

• Gridとは、コンポーネントを縦横方向に配置できる2次元レイアウトシステムである- MUIにおけるGridは、より高い柔軟性を実現するためCSS FlexBox¹を基盤として動作する

特徴

• スマートフォン(xs)、タブレット(sm)、デスクトップ(md, lg, xl) ごとに UI 設定が可能 - 各行は12列で表示され、解像度ごとに希望の数で配置できる
  • 例 xs={6} : 12/6=2で各行ごとに2つずつデータを表示する- Flexboxベースの多様な方式での値適用や順序を逆にして表示するなど、様々な方式でのコンテンツ配置が可能

使用方法

• container プロパティを使用してグリッドコンテナを生成する- Grid Item コンポーネントは常にグリッドコンテナ内部のアイテムに存在する必要があり、item を明示しなければならない- アイテム間の間隔については、コンテナ内部に spacing={3} のように値を指定して間隔を設定できる
• グリッド内部でのアイテム配置位置などを設定するには、sx={{}}内部にコードを記述することで適用可能 - アイテムのサイズ設定は共通サイズであるsizeと、各デバイス別解像度(xs, sm, md, lg, xl)別に設定可能。サイズにflexGrowを指定した場合、自動的にサイズが割り当てられる

サンプルコード

react Hello

• このコードにおいてxsはアイテムの長さを意味する

  1行はデフォルトで12のサイズを持ち、アイテムのsizeが6の場合、12/6=2でコンテナの半分のサイズを持つことになる

  • この一行のサイズは、**columns={10}**のように親グリッドコンテナでサイズ設定が可能である

  xs、sm、md、lg、xlの各種解像度別サイズ設定が可能
  ​
  このように使用できる

                   padding: "20px", display: "flex", // デフォルト値 flexWrap: "wrap", // 改行許可 }}> {tempData.map((item) => ( <Grid item key={item.id}
                      xs={6} sm={4} md={3} > <Box sx={{ border: '1px solid #ddd', borderRadius: '4px', padding: '20px', textAlign: 'center', height: '100px',
                          display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100px', wordBreak: 'break-word', //テキストがはみ出した時に自動改行
                          overflow: 'hidden', }} onClick={() => alert(`실행됨 ${item.id}`)}> <Typography variant="h6">{item.title}</Typography> <Typography variant="body2">{item.content}</Typography> </Box> </Grid>
              ))} </Grid> </Container> ~~~ ![Image Alt 텍스트]({{link}}/assets/img/React/Grid/grid_test.png )
  

参考資料

実践！Spring BootとReactで始めるモダンWebアプリケーション開発²

グリッド

今度こそCSS Gridをマスターしよう

[React] Reactで1行に4つずつ表示する（特定の数表示後に改行、display:grid使用）