MUI breakpoints not working with an expandable drawer-CodePudding

So i have a drawer, and ive modified it with a default width of 450px, and a max width 0f 800px. I have xs set 6, and sm set to 4. But it doesnt change. It sets it to 4, and remains, no matter if i expand it to 800, or 450.

            <Box>
                <Grid container spacing={2} sx={{padding:'20px'}}>
                    {catalog.map((item, key) => {
                        return ( 
                            <Grid xs={6} sm={4} key={key}>
                                <Card className="media-catalog-item" sx={{height:'250px'}}>
                                    <CardContent sx={{padding:'0px'}}>
                                        <div className="media-item-title">{item.info.label}</div>
                                        <div onClick={()=>{clickMedia(item)}}>
                                            <img src={"https://example.com"   item.overlay}></img>
                                            <img src={"https://example.com"   item.thumbnail}></img>
                                        </div>
                                        <div className= {list ? "list-item-footer" : "grid-item-footer"}>{item.info.displayName}</div>
                                    </CardContent>
                                    <CardActions>
                                        <Button onClick={() => {notesOperations(item)}}>Notes</Button>
                                        <Button onClick={() => {keywordsOperations(item)}}>Keywords</Button>
                                    </CardActions>
                                </Card>
                            </Grid>
                        )
                    })}
                </Grid>
            </Box>

So it should start at 2 items on a row, and as i expand up to 600px , switch to 3 on a row.

this is using MUI grid v2. Should I just use the regular grid and add item?

CodePudding user response：

You missed to add item property to the Grid

<Box>
                <Grid container spacing={2} sx={{padding:'20px'}}>
                    {catalog.map((item, key) => {
                        return ( 
                            // here you missed the item props
                            <Grid item xs={6} sm={4} key={key}>
                                <Card className="media-catalog-item" sx={{height:'250px'}}>
                                    <CardContent sx={{padding:'0px'}}>
                                        <div className="media-item-title">{item.info.label}</div>
                                        <div onClick={()=>{clickMedia(item)}}>
                                            <img src={"https://example.com"   item.overlay}></img>
                                            <img src={"https://example.com"   item.thumbnail}></img>
                                        </div>
                                        <div className= {list ? "list-item-footer" : "grid-item-footer"}>{item.info.displayName}</div>
                                    </CardContent>
                                    <CardActions>
                                        <Button onClick={() => {notesOperations(item)}}>Notes</Button>
                                        <Button onClick={() => {keywordsOperations(item)}}>Keywords</Button>
                                    </CardActions>
                                </Card>
                            </Grid>
                        )
                    })}
                </Grid>
            </Box>