たくさんの自由帳

MUIのGridを使って残りを埋めたり真ん中においたり

投稿日 : | 0 日前

文字数(だいたい) : 882

目次

どうもこんばんわ。
Viewを目一杯広げる場合Androidだとweight="1"なのに、HTMLになると急に意味がわからなくなる。
自分用メモ

環境

MUIできればいいのでNext.js使う必要はないと思います。

なまえあたい
言語TypeScript
React17
Next.js (多分Reactだけでいい)12
MUI5.4.0

残りを埋める

これだけで埋めてくれます、CSS何も分からんからくっそ便利

横

const Home: NextPage = () => {
  return (
    <Box>
      <Grid container >
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.blue[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
        <Grid item xs>
          <Card sx={{ backgroundColor: colors.red[100] }}>
            <p>ここは目一杯使ってほしい</p>
          </Card>
        </Grid>
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.blue[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
      </Grid>
    </Box>
  )
}
 
export default Home

Imgur

xs="auto"を付けることで必要最低限は確保してくれます。
残りはxsを付けた要素が使ってくれます。

詳しくは：

https://mui.com/components/grid/#auto-layout

縦

多分heightの指定が必要だと思う

const Home: NextPage = () => {
  return (
    <Box>
      <Grid
        container
        direction="column"
        sx={{ minHeight: "100vh" }}
      >
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.blue[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
        <Grid item xs>
          <Card sx={{
            height: "100%",
            backgroundColor: colors.yellow[100]
          }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.red[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
      </Grid>
    </Box>
  )
}
 
export default Home

Imgur

真ん中

thx!!!
https://stackoverflow.com/questions/50766693/how-to-center-a-component-in-mui-and-make-it-responsive

横

const Home: NextPage = () => {
  return (
    <Box>
      <Grid
        container
        direction="row"
        alignContent="center"
        justifyContent="center"
        sx={{ minHeight: "100vh" }}
      >
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.blue[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.yellow[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.red[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
      </Grid>
    </Box>
  )
}
 
export default Home

Imgur

縦

const Home: NextPage = () => {
  return (
    <Box>
      <Grid
        container
        direction="column"
        alignContent="center"
        justifyContent="center"
        sx={{ minHeight: "100vh" }}
      >
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.blue[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.yellow[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
        <Grid item xs="auto">
          <Card sx={{ backgroundColor: colors.red[100] }}>
            <p>ここは最低限あればいいのよ</p>
          </Card>
        </Grid>
 
      </Grid>
    </Box>
  )
}
 
export default Home

Imgur