【初学者向け】React(TS) + MUIでGridを使ってレイアウトを作る

概要

MUI使ってレイアウト考えるときにGrid使うけど書き方とか考え方全部覚えてられねえよ！ってことで備忘録的に書くことにしました。将来の自分のためにまとめてみます。

そもそも初めに

この記事で書いてあることも書いてないことも書いてあるから公式サイトを見ようね。

Gridってなんぞや？

Gridを使うことでスクリーンサイズを変えたときに、要素がサイズに合わせて大きさや形や場所を変えることができるようになるよ。
MUIでは12列のGridレイアウトを使っていて初心者でも安心。

イメージ

基本的にGrid containerという親要素にGridで子要素を追加して使うよ。

試しに書いてみよう

コード

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

const Item = styled(Paper)(({ theme }) => ({
  textAlign: 'center',
  padding: '100px',
  fontSize: '40px',
}));

const App = () => {
  return (
    <Box sx={{ flexGrow: 1, backgroundColor: '#a0a0a0', padding: '20px' }}>
      <Grid container spacing={2}>
        <Grid item xs={6}>
          <Item>子要素</Item>
        </Grid>
        <Grid item xs={6}>
          <Item>子要素</Item>
        </Grid>
      </Grid>
    </Box>
  );
};
export default App;

実際にできたもの

こんな感じに簡単に要素を配置できて、しかもレスポンシブ対応しててとても便利。

もう少し難しいものを書いてみよう

イメージ

あの鳥のSNSのレイアウトを作ってみよう。

コード

import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';

const App = () => {
  return (
    <Box sx={{ flexGrow: 1, backgroundColor: '#000' }}>
      <Grid container sx={{ backgroundColor: '#66F6FF' }}>
        <Grid xs={2}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            fontSize="25px"
            padding="5px"
          >
            😊
          </Box>
        </Grid>
        <Grid xs={8}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            fontSize="30px"
            padding="5px"
          >
            🐓
          </Box>
        </Grid>
        <Grid xs={2}></Grid>
      </Grid>
      <Grid container>
        <Grid container sx={{ backgroundColor: '#f0f0f0' }}>
          <Grid container sx={{ borderBottom: '1px solid black' }}>
            <Grid xs={12}>
              <Box fontSize="25px" padding="5px">
                😁
              </Box>
            </Grid>
            <Grid container>
              <Grid item xs={6} display="flex" justifyContent="center" alignItems="center">
                <Box
                  sx={{
                    backgroundColor: '#a0a0a0',
                    padding: '115px',
                    paddingLeft: '155px',
                    paddingRight: '155px',
                    margin: '5px',
                  }}
                />
              </Grid>
              <Grid container item xs={6}>
                <Grid item xs={12}>
                  <Box sx={{ backgroundColor: '#a0a0a0', padding: '55px', margin: '5px' }} />
                </Grid>
                <Grid item xs={12}>
                  <Box sx={{ backgroundColor: '#a0a0a0', padding: '55px', margin: '5px' }} />
                </Grid>
              </Grid>
            </Grid>
          </Grid>
          <Grid container>
            <Grid xs={12}>
              <Box fontSize="25px" padding="5px">
                🥺
              </Box>
            </Grid>
            <Grid container item xs={6}>
              <Grid item xs={12}>
                <Box sx={{ backgroundColor: '#a0a0a0', padding: '55px', margin: '5px' }} />
              </Grid>
              <Grid item xs={12}>
                <Box sx={{ backgroundColor: '#a0a0a0', padding: '55px', margin: '5px' }} />
              </Grid>
            </Grid>
            <Grid container item xs={6}>
              <Grid item xs={12}>
                <Box sx={{ backgroundColor: '#a0a0a0', padding: '55px', margin: '5px' }} />
              </Grid>
              <Grid item xs={12}>
                <Box sx={{ backgroundColor: '#a0a0a0', padding: '55px', margin: '5px' }} />
              </Grid>
            </Grid>
          </Grid>
          <Grid container sx={{ backgroundColor: '#66F6FF', position: 'absolute', bottom: '0' }}>
            <Grid xs={3} sx={{ borderRight: '1px solid black' }}>
              <Box sx={{ padding: '40px', margin: '5px' }} />
            </Grid>
            <Grid xs={3} sx={{ borderRight: '1px solid black' }}>
              <Box sx={{ padding: '40px', margin: '5px' }} />
            </Grid>
            <Grid xs={3} sx={{ borderRight: '1px solid black' }}>
              <Box sx={{ padding: '40px', margin: '5px' }} />
            </Grid>
            <Grid xs={3} sx={{ borderRight: '1px solid black' }}>
              <Box sx={{ padding: '40px', margin: '5px' }} />
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};
export default App;

めっちゃきたねえ

実際にできたもの

割と簡単に作りたいもの作れるね。

最後に

MUIReact(TS) + MUIでGridを使ってちょっとしたレイアウトを作ってみました！

これで以上になります。ありがとうございました。