Trying to display 3 items per row in a grid, using the MUI Grid component:
const itemStyle = {
backgroundColor: "red",
height: "300px",
};
function App() {
return (
<Grid container gap={1} spacing={1} direction={"row"}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
);
}
However, the 3rd item always goes to the next line. If I make it xs={3}, all 3 items will be on the same line but there's a bunch of extra space at the end of each row.
Created this in a fresh project without any themes. It works where there is no gap, spacing={1} doesn't do anything - all 3 items will have no space between them. I suspected it was because the number of columns didn't add up, so I tried
<Grid container gap={1} columns={14}>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
<Grid item xs={4} sx={itemStyle}></Grid>
</Grid>
But that just does the same thing as xs={3}.
Related
Hello i'm trying to add padding custom css but this padding should appear on medium size.
I tried to use code like this but it doesn't work
<Grid container spacing={4} sx={md:{p:12}}>
Try change
sx to xs
And as demo on MUI official:
<Grid container spacing={2}>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={4}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid item xs={6} md={8}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
I am using https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-mui which is a KotlinJS wrapper around Material UI for React.
I am trying to port the following code to Kotlin:
<Grid container spacing={3}>
<Grid xs="auto">
<Item>variable width content</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
</Grid>
</Grid>
The issue I am having is that I don't know how to set the value for the xs breakpoint.
Okay apparently this can be done by creating extension properties:
inline var GridProps.xs: Any?
get() = asDynamic().xs
set(value) = asDynamic().xs = value
(https://github.com/JetBrains/kotlin-wrappers/issues/1856)
Using the React #mui package, I want to create a grid of items that all stretch to the same height as the tallest item. I've tried searching for similar questions but have not found a working solution, and using #mui v5. Here's my example, also found on Sandbox https://codesandbox.io/s/happy-moon-y5lugj?file=/src/App.js. I prefer a solution (if possible) using the #mui components rather than grid css directly. Also I cannot fix the number of columns, it needs to be responsive.
import * as React from "react";
import {
Box,
Card,
Container,
Grid,
Paper,
Table,
TableBody,
TableRow,
TableCell,
Typography
} from "#mui/material";
export default function App() {
const createTable = (rows) => {
return (
<Table>
<TableBody>
{[...Array(rows).keys()].map((n) => {
return (
<TableRow key={n}>
<TableCell>Aaaaa</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
};
return (
<Box p={3}>
<Container maxWidth="sm" height="100%">
<Grid container spacing={2} height="100%">
<Grid item height="100%">
<Paper height="100%" elevation={3} sx={{ p: 3 }}>
<Typography variant="h4">Something</Typography>
{createTable(5)}
</Paper>
</Grid>
<Grid item height="100%">
<Paper height="100%" elevation={3} sx={{ p: 3 }}>
<Typography variant="h4">More things</Typography>
{createTable(3)}
</Paper>
</Grid>
</Grid>
</Container>
</Box>
);
}
This is what I get now. I want the shorter item to be padded on the bottom so its the same height as the first.
Please use this code from the box downwards. You can read more about how to work with grid items on the mui website here.
const StackOverflow = () => {
const createTable = (rows) => {
return (
<Table>
<TableBody>
{[...Array(rows).keys()].map((n) => {
return (
<TableRow key={n}>
<TableCell>Aaaaa</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
};
return (
<Box p={3}>
<Container maxWidth="sm">
<Grid container spacing={2}>
<Grid item xs={6}>
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
<Typography variant="h4">Something</Typography>
{createTable(5)}
</Paper>
</Grid>
<Grid item xs={6}>
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
<Typography variant="h4">More things</Typography>
{createTable(3)}
</Paper>
</Grid>
</Grid>
</Container>
</Box>
);
};
Something that worked good for me was to use the following in the Papers sx prop:
{{height: "100%", display: "flex", alignItems: "center"}}
How can I align items vertically in material UI?
https://codesandbox.io/s/material-demo-forked-wrn9x
Here I want put Start element and top, Center element at center and End element at bottom
I am looking for clearest and best solution
If you using grid just do this :
<Grid
container
direction="column"
justify="center"
alignItems="center"
spacing={3}
className={classes.container}
>
you can use the interactive tool of MUI doc for play around and get the props you have to pass for create all the layout you need in the future.
https://material-ui.com/components/grid/#grid
Here is the code that will make three grids - start, centre and end to appear in a column one after another. This layout will remain the same across all screen resolutions/breakpoints.
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,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
border: '2px solid #969292',
}
}));
export default function CenteredGrid() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>Start</Paper>
</Grid>
<Grid item item xs={12}>
<Paper className={classes.paper}>Center</Paper>
</Grid>
<Grid item item xs={12}>
<Paper className={classes.paper}>End</Paper>
</Grid>
</Grid>
</div>
);
}
This code will generate a layout like below:
I have this code:
<Grid item xs={12}>
<Grid container spacing={8} >
<Grid item xs={3} ></Grid>
{ someState && <SomeComponent /> }
</Grid>
</Grid>
At the first render, someState will be always false and only when I change that state I will show SomeComponente but I need to have that Grid visible and empty, in other words, using the row space in the dom. I don't want it hidden. How can I do it? I tried by putting the Gridcomponent empty as I show in the code, but the Grid container isn't using that space.
const SomeComponent = () => (
<Fragment>
<Grid item xs={3}>
<Typography variant="body1">Title</Typography>
</Grid>
<Grid item xs={3}>
asdasdasd
</Grid>
</Fragment>
);
Try this:
<Grid item xs={3} >{someState && <SomeComponent />}</Grid>
This will create the Grid regardless of someState and will fill the space, after someState is thruthy.