How to Create Responsive Grid Columns with Radix-UI Themes?

[onurhan1337]

I'm currently working on a project using Radix-UI Themes and I've come across a challenge that I'm hoping someone can help with. I'm trying to implement a responsive grid layout using the Grid component from Radix-UI Themes. The goal is to have a grid layout that adapts to different screen sizes. For instance, on larger screens, I would like to display multiple columns, but on smaller screens, I would like to display fewer columns or even just a single column.

An example like I want to do:

<Grid columns={{ base: '1', md: '2'}} gap="3" width="auto"

I've been trying to figure out how to do this, but I'm not sure how to approach it. If anyone has experience with creating responsive grid columns using Radix-UI Themes, I would greatly appreciate your insights and advice.

Here's a simplified version of the code I'm currently working with:

import {Box, Grid, Section} from "@radix-ui/themes";

const IndexPage = () => {
    return (
        <Section>
            <Grid columns="2" gap="3" width="auto"
            >
                <Box
                       // some styling...
                    />
                    
                <Box
                       // some styling...
                    />
            </Grid>
        </Section>
    )
}

export default IndexPage;

In this code, I'm using the Grid component from Radix-UI Themes to create a grid layout with two columns. However, I'm not sure how to make this grid layout responsive. Any help would be greatly appreciated!

[vladmoroz]

Grid columns supports responsive values:

<Grid columns={{ initial: '1', md: '2'}} gap="3" width="auto">

See breakpoints and Grid docs for reference

[onurhan1337]

Oh nice, thanks! I can't found it in the official document. Should I create a PR for add this to document?