Scribd
Upload
219 views3 pages

React MUI Responsive FlexBox Grid

The document shows how to create a responsive flexbox grid using React MUI. It returns a Box component with flex direction and sizing properties that adjust based on screen size. Three child Box components are rendered inside with orange backgrounds to demonstrate how the flexbox grid responds as the screen size changes.

Uploaded by

Ali Ayub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
219 views3 pages

React MUI Responsive FlexBox Grid

The document shows how to create a responsive flexbox grid using React MUI. It returns a Box component with flex direction and sizing properties that adjust based on screen size. Three child Box components are rendered inside with orange backgrounds to demonstrate how the flexbox grid responds as the screen size changes.

Uploaded by

Ali Ayub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

import { Box } from "@mui/material";

React MUI Responsive

const App = () => {

return (
FlexBox Grid
<Box

sx={{

display: "flex", flexWrap: "wrap", width: "90%", margin: "0 auto",

flexDirection: {xs: "column", sm: "row"},

alignItems: "center",justifyContent: "space-between"}}>

<Box

sx={{display: "flex",height: "120px",width: {

xs: "100%",sm: "30%"},

alignItems: "center",justifyContent: "center",background:"orange",

borderRadius: "20px", mt:'12px'}}></Box>

<Box

sx={{

display: "flex", height: "120px",

width: {xs: "100%", sm: "30%"},

alignItems: "center",justifyContent: "center",

background:"orange",borderRadius: "20px",mt:'12px'}}></Box>

<Box

sx={{display: "flex",height: "120px",width: {xs: "100%", sm: "30%"},

alignItems: "center", justifyContent: "center",

background:"orange", borderRadius: "20px",mt:'12px'}}

></Box>

</Box>

);

};

export default App;

https://www.linkedin.com/in/pushpendratips
https://www.linkedin.com/in/pushpendratips
f o r r e a d i n g !

T h a n k s
r o fi l e o r e

f o r m
Fo l l o w m y p
t e d c o n t e n t s
codin g r e l a

Like comment Share

@Pushpendra Tripathi

https://www.linkedin.com/in/pushpendratips

You might also like