Setting different gutter width for different screen resolutions

[bdeepu]

Hi,

Thanks for this wonderful grid system, I really loved it and is pretty handy too.

I just have one question, is there a way I can change the gutterwidth based on screensize? Or else is it possible to set the gutter width in 'em' instead of 'px'?

For example, I would like to set the gutter width as 40px for screen resolution above 1600 and gutterwidth 30 for screen resolution aboue 1200 and so on.

At present I set the gutter width using the below configuration.

setConfiguration({
gridColumns: 24,
gutterWidth: 40
});

Any help in this would be highly appreaciated.

Thanks in advance.

[ArthurClemens]

This is how I would do it:

const screenClass = useScreenClass();

const defaultGutterWidth = 20;
const gutterWidths = {
  xl: 30,
  xxl: 40,
};
const gutterWidth = gutterWidths[screenClass] || defaultGutterWidth;

const RowWithGutter = (props) => (
  <Row {...props} gutterWidth={gutterWidth} />
);