CODEWITHSUNDEEP
reactjsmaterial-ui
A.A
A.A

Reputation: 4151

MUI row vs column 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 }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function BasicGrid() {
  return (
    <Box sx={{ width:'80vw',height:'80vh',background:'lightblue' }}>
      <Grid container spacing={2} direction='row'>
        <Grid item xs={8}>
          <Item>xs=8</Item>
        </Grid>
        <Grid item xs={4}>
          <Item>xs=4</Item>
        </Grid>
      </Grid>
    </Box>
  );
}

In MUI,When direction='row' we have the following output

enter image description here

And when direction='column'

enter image description here

If we think like flexbox in css, we expect the following

enter image description here

My question is, What is the purpose of xs={number} in column mode? And how can I have the expected output with Grid?

Upvotes: 0

Views: 1726

Answers (1)

MrPatel2021
MrPatel2021

Reputation: 221

If you give direction="column" to container grid and xs={number} in grid item, then maximum size of column is size of xs props.

<Box>
  <Grid
    container
    direction="column"
    justifyContent="center"
    alignItems="center"
  >
    <Grid item xs={12}>
      <Item>xs=12</Item>
    </Grid>
    <Grid xs={10}>
      <Item>xs=10</Item>
    </Grid>
    <Grid xs={2}>
      <Item>xs=2</Item>
    </Grid>
  </Grid>
</Box>

Upvotes: 0

Related Questions