0
202
ViewsWhy the Grid Element Not Arranging The Typography
**i want to create a component which will have books in the responsive tabs but and I used material UI grid toh arrange them as per the screen Width , but I Dont Know what is did Wrong they should be arranged in 2 columns below is the code and Screen shot of my result **
import React from 'react'
import { Grid, Typography, Box, makeStyles } from "@material-ui/core"
const useStyles = makeStyles({
container: {
width: "100%",
border: "2px solid green",
"& > *": {
textAlign: "center"
}
},
names: {
display: "flex"
}
})
function Books() {
const classes = useStyles()
return (
<Box className={classes.container}>
<Grid item lg={6}>
<Typography className={classes.names}>HEllo</Typography>
<Typography className={classes.names}>HEllo</Typography>
</Grid>
</Box>
)
}
export default Books
the view of the component
**I want them to arrange in 2 columns **
·
Juan Pablo Isaza
1 answers
Answer question0
Here's a working example of the same on codesandbox.
Here's the code.
import ReactDOM from "react-dom";
import { Grid, Typography, Box, makeStyles } from "@material-ui/core";
const useStyles = makeStyles({
container: {
width: "100%",
border: "2px solid green",
"& > *": {
textAlign: "center"
}
},
names: {
display: "flex"
}
});
function App() {
const classes = useStyles();
return (
<Box className={classes.container}>
<Grid container>
<Grid item xs={6}>
<Typography className={classes.names}>HEllo</Typography>
</Grid>
<Grid item xs={6}>
<Typography className={classes.names}>HEllo</Typography>
</Grid>
</Grid>
</Box>
);
}
·
Juan Pablo Isaza
Report
Answer question