In the following image the blue block is rendered under the red and green blocks. I would like the blue block to render directly underneath the red block.
Is there a way to achieve this with MUI grid?
import * as React from "react";
import Box from "#mui/material/Box";
import Grid from "#mui/material/Grid";
export default function BasicList() {
return (
<Box>
<Grid container>
<Grid item alignContent="center" justifyContent="center" md={6}>
<Box style={{backgroundColor:"red"}} height={200}>
MD = 6 Height = 200
</Box>
</Grid>
<Grid item md={6}>
<Box style={{backgroundColor:"green"}} height={600}>
MD = 6 Height = 600
</Box>
</Grid>
<Grid item md={6}>
<Box style={{backgroundColor:"blue"}} height={200}>
MD = 6 Height = 200
</Box>
</Grid>
</Grid>
</Box>
);
}
You should put both Red and Blue boxes together as one grid. something like this can solve the problem:
import * as React from "react";
import Box from "#mui/material/Box";
import Grid from "#mui/material/Grid";
export default function BasicList() {
return (
<Box>
<Grid container>
<Grid item alignContent="center" justifyContent="center" md={6}>
<Box style={{backgroundColor:"red"}} height={200}>
MD = 6 Height = 200
</Box>
<Box style={{backgroundColor:"blue"}} height={200}>
MD = 6 Height = 200
</Box>
</Grid>
<Grid item md={6}>
<Box style={{backgroundColor:"green"}} height={600}>
MD = 6 Height = 600
</Box>
</Grid>
</Grid>
</Box>
);
}
Each grid can be responsible for a column in your design.
Related
I have a grid element with maxWidth so that it has horizontal margin when displayed in a big screen. I want the grid element to be centered and a long paragraph should be aligned to the left side. How would you do? I'm using MUI v5. Thank you.
<Box
style={{
backgroundColor:"rgb(234, 237, 242)"
}}
>
<Grid container alignItems='center' justifyContent='center' maxWidth='md'>
<Grid item xs={12} md={12} justifyContent="center">
<Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{mb:4}}>
Nice title
</Typography>
<Typography sx={{ px: 4 }} paragraph>very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line. very very long line.</Typography>
</Grid>
</Grid>
</Box>
It's simple enough using system properties.
<Box
display="flex"
justifyContent="center"
style={{
backgroundColor:"rgb(234, 237, 242)"
}}
>
...
You can try the following code. I have checked this code it is working perfectly.
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';
import Typography from '#mui/material/Typography';
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
export default function BasicGrid() {
return (
<Box sx={{ flexGrow: 1, backgroundColor: 'rgb(234, 237, 242)' }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Item>
<Typography align="center" variant="h4" style={{ fontWeight: 800 }} sx={{ mb: 4 }}>
Hello
</Typography>
<Typography align="center" sx={{ px: 4 }} paragraph>
very very long line
</Typography>
</Item>
</Grid>
</Grid>
</Box>
);
}
I have a Grid container containing four Grid items. The first Grid item is full width and contains a title. The other three Grid items contain avatars. I want to align the avatars to the right of the page and I would like the title to align with the left-most avatar. However, it is currently further to the left than the avatars. The other issue is that the number of avatars can vary (likely between 1 and 3 but possibly more). How can I ensure the left-most avatar and title align?
Here is the result I am getting:
And here is what I would like to achieve:
Here is my code:
import React from "react";
import { Grid, makeStyles, Typography, Divider, Avatar } from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
header: {
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
flexGrow: 1,
},
}));
const Header = ({ padding }) => {
const classes = useStyles();
return (
<>
<Grid
container
item
direction="row"
justify="space-between"
align-items="center"
xs={12}
className={`${padding} ${classes.header}`}
>
{/*Page title and description*/}
<Grid item xs>
<Typography variant="h1" component="h1">
Page Title
</Typography>
<Typography variant="body1">
This is a description of what the page is about
</Typography>
</Grid>
{/*People container*/}
<Grid item xs className={classes.smeSection} alignItems="bottom">
{/*People profiles*/}
<Grid container item justify="flex-end" alignItems="bottom">
<Grid item xs={12}>
<Typography variant="h5">People</Typography>
</Grid>
<Grid item>
<Avatar/>
</Grid>
<Grid item>
<Avatar/>
</Grid>
<Grid item>
<Avatar />
</Grid>
</Grid>
</Grid>
</Grid>
<Divider />
</>
);
};
export default Header;
Many thanks!
Katie
By continuously nesting flexbox components it is very easy to make mistakes and get lost in the code.
If it was that I understood your requirement well, here is the code with which I managed to get that layout:
import React from "react";
import { Grid, Typography, Divider, Avatar } from "#material-ui/core";
const Header = () => {
return (
<>
<Grid container direction="row" align-items="center">
{/*Page title and description*/}
<Grid item xs={9}>
<Typography variant="h1" component="h1">
Page Title
</Typography>
<Typography variant="body1">
This is a description of what the page is about
</Typography>
</Grid>
{/*People container*/}
<Grid container item xs={3}>
{/*People profiles*/}
<Grid container item>
<Grid item>
<Typography variant="h5">People</Typography>
</Grid>
<Grid container>
<Grid item>
<Avatar />
</Grid>
<Grid item>
<Avatar />
</Grid>
<Grid item>
<Avatar />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Divider />
</>
);
};
export default Header;
A grid can be "container", "item" or both. The most important changes I made to your code was to make all grid parents "containers" and add a width size to the first two grid items (xs={9} and xs={3}).
Here's a CodeSandbox with a working example: https://codesandbox.io/s/upbeat-banzai-0gp10?file=/src/Header.js:0-1119
In my opinion, I think a better alternative is to use a combination of Grid (for general layout) and Flexbox to align the nested elements.
UPDATE:
With the new data you added as a reference I made the layout again using flexbox.
import React from "react";
import {
Typography,
makeStyles,
Avatar,
Card,
CardHeader,
Divider
} from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "space-between"
},
usersHeader: {
marginLeft: theme.spacing(2)
},
personCards: {
display: "flex"
}
}));
const Header = () => {
const classes = useStyles();
return (
<>
<div className={classes.root}>
<div>
<Typography variant="h3" component="h1">
Page Title
</Typography>
<Typography variant="body1">
This is a description of what the page is about
</Typography>
</div>
<div>
<Typography className={classes.usersHeader} variant="subtitle">
Users
</Typography>
<div className={classes.personCards}>
<Card elevation={0}>
<CardHeader
avatar={<Avatar />}
title="Person name"
subheader="Person role"
/>
</Card>
<Card elevation={0}>
<CardHeader
avatar={<Avatar />}
title="Person name"
subheader="Person role"
/>
</Card>
<Card elevation={0}>
<CardHeader
avatar={<Avatar />}
title="Person name"
subheader="Person role"
/>
</Card>
</div>
</div>
</div>
<Divider />
</>
);
};
export default Header;
CodeSandbox reproduction: https://codesandbox.io/s/condescending-cartwright-grxhj?file=/src/Header.js
I'm trying to create a grid system with a gradient background color. However, the background color also applies to the empty spaces not taken up by grid cells. I want just the grid cells to share this gradient. Is there any way to do this?
Image: https://imgur.com/a/WHVhFg1
You should set a linear background color for your container and set background: 'inherit' for your grid item. Inside your grid item, you should use an image with a no background color.
Try this:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import Grid from "#material-ui/core/Grid";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
background:
"linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
background: "inherit"
}
}));
export default function AutoGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
<Grid item xs={3}>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
</Grid>
<Grid container spacing={3}>
<Grid item xs>
<Paper className={classes.paper}>
<img
height="100px"
alt="cat"
src="http://assets.stickpng.com/thumbs/584c3c8a1fc21103bb375ba7.png"
/>
</Paper>
</Grid>
</Grid>
</div>
);
}
I need some help with positioning my Grid Items while using Material UI.
Codesandbox is where I am so far (roughly).
And my question is quite simple - how do I get 2 & 3 to go to the right of 1? I kinda do it but there are all those weird spaces to the left and down that, I cannot figure out how to deal with.
That's the end result I'm after:
Thank you.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Typography from "#material-ui/core/Typography";
import Paper from "#material-ui/core/Paper";
import Divider from "#material-ui/core/Divider";
import Grid from "#material-ui/core/Grid";
const useStyles = makeStyles(theme => ({
container: {
// display: "grid",
gridTemplateColumns: "repeat(12, 1fr)",
gridGap: theme.spacing(3)
},
paper: {
padding: theme.spacing(1),
textAlign: "center",
color: theme.palette.text.secondary,
whiteSpace: "nowrap",
marginBottom: theme.spacing(1)
},
w: {
height: "100px"
},
divider: {
margin: theme.spacing(2, 0)
}
}));
export default function CSSGrid() {
const classes = useStyles();
return (
<div>
<Grid container spacing={3}>
<Grid container direction="column">
<Grid item xs={8}>
<Paper className={classes.paper + " " + classes.w}>xs=8</Paper>
</Grid>
</Grid>
<Grid
container
style={{ display: "table", height: "100%" }}
direction="row"
>
<Grid item xs={4}>
<Paper className={classes.paper}>xs=4</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>xs=4</Paper>
</Grid>
</Grid>
</Grid>
<Divider className={classes.divider} />
</div>
);
}
Some notice points from your code
use one container for one grid field structure
remove direction setting direction="column"
xs sum needs to lower or equal to 12 if you want to set them in one row.
Kindly check the material-ui grid document for better understanding
<Grid container spacing={3}>
<Grid item xs={8}>
<Paper className={classes.paper + " " + classes.w}>xs=8</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>xs=2</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>xs=2</Paper>
</Grid>
</Grid>
<Divider className={classes.divider} />
Update:
<Grid container spacing={3}>
<Grid item xs={8}>
<Paper className={classes.paper + " " + classes.w}>xs=8</Paper>
</Grid>
<Grid item xs={4}>
<Grid container>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=4</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>xs=4</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
<Divider className={classes.divider} />
Try it online:
I am in learning phase of the material-ui and I am facing an issue that I am not able to float the grid content into right side.
I tried alignItems="flex-start" justify="flex-end" direction="row" in the container grid but not succeed and also tried css float:right property.
I go through the answer of stackoverflow question but it not work for me.
My Code is below and codesandbox link
import React from "react";
import ReactDOM from "react-dom";
import {
ExpansionPanel,
ExpansionPanelSummary,
ExpansionPanelDetails,
Typography,
Grid
} from "#material-ui/core/";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
function App() {
return (
<ExpansionPanel square defaultExpanded={true}>
<ExpansionPanelSummary
style={{ backgroundColor: "#009ACD", color: "white" }}
expandIcon={<ExpandMoreIcon />}
id="panel1a-header"
>
<Typography variant="h6">General Details</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container>
<Grid item sm={3}>
Image Container
</Grid>
<Grid item sm={2}>
<Typography variant="h6"> {"Prabhat Kumar"}</Typography>
<Typography> Tester </Typography>
</Grid>
<Grid
contaienr
sm={7}
alignItems="flex-end"
justify="flex-end"
direction="row"
>
<Grid item>
<Typography variant="h6">
Need this content on the right side
</Typography>
</Grid>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I tried you sandbox and found a few things going on here:
contaienr where should be container
<Grid
contaienr // Fix
sm={7}
alignItems="flex-end" // remove
justify="flex-end"
direction="row" // Remove
>
Just replace those to this:
<Grid container sm={7} justify="flex-end">