Responsive

All Styled component props are responsive by default. This means that for every prop, you can also pass a responsive style object instead. This allows you to apply different styles depending on the device screen width.

Screens

Responsive style object

A responsive style object will take any of the theme's screens as a key and any type of value as defined by the base prop. In addition to the screen keys, the interface accepts a initial key to define the default styles.

Given following style prop

const styleProp = { textAlign: "center" };

and assuming the default theme is available, a responsive prop may look like this

const responsiveStyleProp = {
  textAlign: {
    initial: "center",
    md: "left",
    lg: "right",
  },
};

Usage

Change the columns value and resize your browser to see the different styles based on the viewport width.

<ThemeProvider theme={theme}>
  <Grid gap={10} columns={{ initial: 1, md: 2, lg: 4 }}>
    <Grid.Item style={{ background: 'darkgray', padding: 20 }} />
    <Grid.Item style={{ background: 'darkgray', padding: 20 }} />
    <Grid.Item style={{ background: 'darkgray', padding: 20 }} />
    <Grid.Item style={{ background: 'darkgray', padding: 20 }} />
  </Grid>
</ThemeProvider>