I am currently working on building a Grid using material UI and reactJs.
I found the guidelines on this link https://mui.com/system/react-grid/.
However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid structure featuring 5 columns for large screens, 3 columns for medium screens, and 2 columns for mobile devices.
While I managed to achieve the 5-column layout, I encountered difficulties trying to implement a 2-column layout for mobile devices.
Current display:
1 2
3 4
5
11 22
33 44
Expected output:
1 2
3 4
5 11
22 33
44
My code can be viewed at: https://codesandbox.io/s/nostalgic-joliot-3xc7bo?file=/src/App.tsx
import * as React from "react";
import {
/* components utilized */
Typography
} from "@mui/material";
import { styled } from "@mui/material";
export const DGrid = styled("div")({
display: "flex",
alignItems: "flexStart",
flexWrap: "wrap"
});
export const DGridCol = styled("div")({
width: "calc(100% / 5 - 16px)",
marginBottom: "24px",
marginRight: "20px",
"&:last-child": { marginRight: "0px" },
"@media (max-width: 768px)": {
width: "calc(100% / 2 - 8px)",
marginBottom: "15px",
marginRight: "16px",
"&:last-child": { marginRight: 16 },
"&:nth-child(2),&:nth-child(4),&:nth-child(6)": { marginRight: 0 }
}
});
/**
* Implementation of the components
*/
export default function App() {
return (
<div>
<DGrid>
<DGridCol>
<div style={{ background: "red" }}>1</div>
</DGridCol>
<DGridCol>
<div style={{ background: "yellow" }}>2</div>
</DGridCol>
<DGridCol>
<div style={{ background: "red" }}>3</div>
</DGridCol>
<DGridCol>
<div style={{ background: "yellow" }}>4</div>
</DGridCol>
<DGridCol>
<div style={{ background: "red" }}>5</div>
</DGridCol>
</DGrid>
<DGrid>
<DGridCol>
<div style={{ background: "red" }}>11</div>
</DGridCol>
<DGridCol>
<div style={{ background: "yellow" }}>22</div>
</DGridCol>
<DGridCol>
<div style={{ background: "red" }}>33</div>
</DGridCol>
<DGridCol>
<div style={{ background: "yellow" }}>44</div>
</DGridCol>
</DGrid>
</div>
);
}
Looking forward to any suggestions.