I want to center the cards inside the grid items, but it's not working.
As I understood from the documentations (https://material-ui.com/components/grid/) I should use justifyContent="center" at the but that's not working, and in one of the answers on stack-overflow (How to center a component in Material-UI and make it responsive?) someone used justify="center" instead, so I tried that too but it didn't work.
<Grid container justifyContent="center">
<Grid item xs={12} md={4} >
<Card style={{maxWidth: 345}}>
<CardActionArea>
<CardMedia
style={{height: 140}}
image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography variant="h5" component="h2">
Lizard
</Typography>
<Typography gutterBottom variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
<Typography gutterBottom varient="h5" color="Secondary">
100
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4}>
<Card style={{maxWidth: 345}}>
<CardActionArea>
<CardMedia
style={{height: 140}}
image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography variant="h5" component="h2">
Lizard
</Typography>
<Typography gutterBottom variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
<Typography gutterBottom varient="h5" color="Secondary">
100
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4}>
<Card style={{maxWidth: 345}}>
<CardActionArea>
<CardMedia
style={{height: 140}}
image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography variant="h5" component="h2">
Lizard
</Typography>
<Typography gutterBottom variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
<Typography gutterBottom varient="h5" color="Secondary">
100
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
</Grid>
You can remove xs and md and change justifyContent to space-around to give proper spacing between them. Have a look at the code sandbox.
Here
Related
I am learning to use Material UI and I cannot figure out something that should be easy.
Given the card below
I want to make all the content centered except for the abcd, efgh, ijkl lines.
This is the final result I would like to have:
And This is the code:
<Grid container spacing={4} >
<Grid item xs={12} sm={6} md={4}>
<Card style={{ padding: '30px 40px 20px'}} >
<CardContent>
<Typography variant="h4" color="textSecondary" >
TEST
</Typography>
<Typography color="textSecondary">Something in here</Typography>
<Divider />
<Grid container justify={'space-between'}>
<Typography item color="textSecondary">
abcd
</Typography>
<Typography item color="textSecondary">
25
</Typography>
</Grid>
<Grid container justify={'space-between'}>
<Typography color="textSecondary">efgh</Typography>
<Typography color="textSecondary">15</Typography>
</Grid>
<Grid container justify={'space-between'}>
<Typography color="textSecondary">ijkl</Typography>
<Typography color="textSecondary">05</Typography>
</Grid>
</CardContent>
<CardActions disableSpacing>
<Button variant="contained" color="primary">
Action 1
</Button>
<Button variant="contained" color="primary">
Action 2
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
I could get the result by giving to the Typograhy elements a style={{textAlign: 'center'}} and to the CardActions a style={{display: 'flex', justifyContent: 'space-between'}} but I was wondering if there is a better way, like a MUI prop to give to grid container that tells to center align everything inside.
I tried giving the grid a justify='center' but it is not doing anything.
Im trying to align some cards vertically in the grid. Here is my sample code.
I have tried the following
Using align="center" and putting the <Box m={1}> section inside another box with display="flex" align="center"
Using the grid system and using align="center"
Both solutions seem to squish the cards horizontally and not vertically align them.
<Grid item md={6} xs={12}>
<Box m={1}>
<Box mb={2}>
<Card className={classes.root} elevation={cardElevation}>
<CardContent style={{ paddingBottom: "0px" }}>
<Typography variant="h5" component="h2">
Email <EmailIcon />
</Typography>
</CardContent>
<Box display="flex" justifyContent="center">
<Button
size="small"
color="primary"
align="center"
href={links.Email}
>
email#gmail.com
</Button>
</Box>
</Card>
</Box>
<Box mb={2}>
<Card className={classes.root} elevation={cardElevation}>
<CardContent style={{ paddingBottom: "0px" }}>
<Typography variant="h5" component="h2">
LinkedIn <LinkedInIcon />
</Typography>
</CardContent>
<Box display="flex" justifyContent="center">
<Button
size="small"
color="primary"
align="center"
href={links.LinkedIn}
>
View My Profile
</Button>
</Box>
</Card>
</Box>
</Box>
</Grid>
You should add flexDirection property to <Box m={1}> to align your card vertically.
Try this:
<Grid item md={6} xs={12}>
<Box m={1} display="flex" alignItems="center" flexDirection="column">
<Box mb={2}>
...
</Box>
<Box mb={2}>
...
</Box>
</Box>
</Grid>
so I have this annoying issue I can't find a result for.
I'm new to material-ui and it feels like I'm missing something here...
I just want a divider between the grid items, without it breaking the order of the grid. What am I missing?
Sandbox: https://vpbyd.csb.app/
import React from "react";
import "./styles.css";
import {Grid, Typography, Divider} from '#material-ui/core'
export default function App() {
return (
<div className="App">
<Grid container spacing={3}>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
One
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Two
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Three
</Typography>
</Grid>
</Grid>
<Grid container spacing={0} alignItems="center">
<Grid item xs={4}>
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}>
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}>
<Typography variant="h6" component="h2">
third value
</Typography>
</Grid>
</Grid>
</div>
);
}
I had the same issue and found a trick : add a negative right margin to your Divider
<Grid item xs={4}>
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem sx={{ mr: "-1px" }} />
<Grid item xs={4}>
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
Try putting the divider inside of a grid container of its own.
<Grid item xs={2}>
<Divider orientation="vertical" flexItem/>
</Grid>
The material ui grid uses flexbox so dropping an item inside of it that does not have the correct properties is going to mess up the grid.
A good generic solution to me is adding this global style
.MuiGrid-container > .MuiDivider-vertical.MuiDivider-flexItem {
margin-right: -1px;
}
in conjunction with adding the JSX property flexItem to the Divider:
<Grid container>
<Grid item xs={4}>
...
</Grid>
<Divider flexItem orientation="vertical" />
<Grid item xs={8}>
...
</Grid>
</Grid>
That's a clean, transparent workaround to me which keeps the grid flowing as expected.
None of those solutions above were ideal for me, so I ended up simulating a Divider by showing the right side left border (you could obviously also do it by showing the left side right border), with the same CSS properties that the Divider uses. Here's a small example:
<Grid
container
direction="row"
justifyContent="space-evenly"
alignItems="top"
>
<Grid
item
xs={6}
style={{
paddingRight: '10px',
}}
Left Side
</Grid>
<Grid
item
xs={6}
style={{
paddingLeft: '10px',
borderStyle: 'solid',
borderColor: 'rgba(0, 0, 0, 0.12)',
borderWidth: '0 0 0 1px'
}}
>
Right Side
</Grid>
</Grid>
note that you are passing 14 column in total to de grid container, at least on the sandbox. Anyway sometimes it happen with 12 columns, it work for me to pass empty breakpoints props at the last grid item, or even for all the Grid Items in your case will be:
import React from "react";
import "./styles.css";
import { Grid, Typography, Divider } from "#material-ui/core";
export default function App() {
return (
<div className="App">
<Grid container spacing={3}>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
One
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Two
</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="h5" component="h2">
Three
</Typography>
</Grid>
</Grid>
<Grid container spacing={0} alignItems="center">
<Grid item xs={4}>
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem />
<Grid item xs={4}>
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem />
<Grid item **xs**>
<Typography variant="h6" component="h2">
third value
</Typography>
</Grid>
</Grid>
</div>
);
}
This will say to the item to occupy all the available space.
The problem is that giving the 12 columns you are stablishing the 100% of the available space, and adding a divider then you have 100% + 1px. normally without grid you'll need to set a calc(100% - 1px).
I am interested in best way to present a React Material-UI with icon and text, so it is all vertically aligned. Right now it does not work as expected, especially with conditional rendering.
<Typography gutterBottom variant="subtitle2" component="h2" align="center">
<Grid container direction="row" alignItems="center" wrap="nowrap">
{p.numRooms > 0 && (
<Grid item xs={2} alignItems="center">
<HotelRoundedIcon color="secondary" />
{p.numRooms}
</Grid>
)}
{p.area > 0 && (
<Grid item xs={2}>
<AspectRatioRounded color="secondary" />
{p.area}
</Grid>
)}
</Grid>
</Typography>
You can add container in your secondary Grids to make icons and text vertically aligned.
<Typography gutterBottom variant="subtitle2" component="h2" align="center">
<Grid container direction="row" alignItems="center" wrap="nowrap">
{p.numRooms > 0 && (
<Grid item xs={2} container >
<HotelRoundedIcon color="secondary" />
{p.numRooms}
</Grid>
)}
{p.area > 0 && (
<Grid item xs={2} container>
<AspectRatioRounded color="secondary" />
{p.area}
</Grid>
)}
</Grid>
</Typography>
I am trying to build kanban board with grid layout. there is seven columns in kanban boards. i have used materail Ui grid for each columns.
I have tried with below css but it's not working
overflow: auto;
width:100%
I have also tried with Single column gridlist but it also not working.
import React from 'react';
import PropTypes from 'prop-types';
import App from "../components/App";
import Header from "../components/Header";
import { withStyles } from '#material-ui/core/styles';
import Grid from '#material-ui/core/Grid';
import GridList from '#material-ui/core/GridList';
import Paper from '#material-ui/core/Paper';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: 30,
display: 'flex',
oveflow: "auto",
maxWidth: "100%"
},
card: {
minWidth: 180,
marginBottom:20
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
content: {
flexGrow: 1
},
paper: {
maxWidth: 800,
margin: `${theme.spacing.unit}px auto`,
padding: theme.spacing(2)
},
});
function SimpleCard(props) {
const { classes } = props;
const bull = <span className={classes.bullet}>•</span>;
return (
<App>
<Header />
<main className={classes.content}>
<div className={classes.toolbar} />
<div className={classes.paper}>
<Grid container className={classes.root} spacing={16}>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="h2">
Task 1
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day Testing
</Typography>
<Typography variant="h5" component="h2">
Task 10000
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
<Grid item xs={2}>
<Paper className={classes.paper}>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Word of the Day Testing
</Typography>
<Typography variant="h5" component="h2">
Task 11562
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</Paper>
</Grid>
</Grid>
</div>
</main>
</App>
);
}
SimpleCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(SimpleCard);
How to add horizontal scroll in grid column layout?
Notice that when you shrink the window of the browser then it appears horizontal scrollbar. Horizontal scrollball only appears when the content overflows outside the browser window. Try to set the width of your root wider than the wide of your browser window. For example 2000px. And delete the width: "100%"