Here is the sample configuration:
`tsx
const GRID_SETTINGS: GridSettings = {
breakpoints: {
sm: {
columns: 4,
gutterSize: 5,
maxWidth: 600,
},
md: {
columns: 8,
gutterSize: 10,
minWidth: 600,
maxWidth: 900,
},
lg: {
columns: 12,
gutterSize: 20,
minWidth: 900,
}
},
prefixes: {
grid: 'g',
gridColumn: 'gc',
},
gridHelperColumnColor: 'rgba(0, 0, 0, .05)'
}
`

Now we can use it in and define that we want to use Grid Helper:
`tsx
// Import CSS for GridHelper component
import 'light-react-grid/dist/index.css'

ReactDOM.render(

settings={myGridSettings}
useGridHelper={true}
>


,
document.getElementById('root')
);
`

Please be aware that we are going to use that breakpoint name for size property in component.
To set column size we need to write __exact__ column names as they are defined in myGridSettings: .

Please checkout example code for more details: example/src.

---
#### Usage
We can set column size and left or right offset.\
To define column size we need to pass size for a breakpoint that we want to use, if we don't define column size for the breakpoints it will automatically set width to 100%.
`tsx



...

`
In case that we don't need column for some reason in a large breakpoint we can use useBreakpoint hook to remove it:
`tsx
const breakpoint = useBreakpoint();
return (

When you define your breakpoints you can always create a wrapper around component
and define breakpoints as props.

`tsx

interface ColumnWrappperProps {
className?: string;
sm?: number;
md?: number;
lg?: number;
offsetLeft?: {
sm?: number;
md?: number;
lg?: number;
};
offsetRight?: {
sm?: number;
md?: number;
lg?: number;
};
}

export const ColumnWrapper: FunctionComponent = ({
children,
className = '',
sm,
md,
lg,
offsetLeft = {},
offsetRight = {},
}) => (
size={{ sm, md, lg }}
offsetLeft={offsetLeft}
offsetRight={offsetRight}
className={className}
>
{children}

);
`
Usage:
`tsx



``

I wish u happy coding!

----
Light React grid is MIT licensed.