This library package includes:
useBreakpoint
hookGridSystemContext
ContextGridSystem
Component withGridHelper
componentGrid
ComponentColumn
Component
If we aren't using default settings we can define breakpoints however we like.
We need to define breakpoints
, prefixes
, gridHelperMargins
. gridHelperColumnColor
breakpoints
is used for declaring names, number of columns, gutterSize and minimum/maximum width of breakpointprefixes
are used for naming CSS classes that are going to be generatedgridHelperColumnColor
will set the column color of GridHelper. By default, it's set torgba(0, 0, 0, .1)
gridHelperMargins
should be only set if you are using some container in your project, for example:
<main style={{margin: '0 5%'}}>
<header><h1>Hello</h1></header>
<Grid>
<Column ... />
...
</Grid>
...
</main>
In that case we need to use gridHelperMargins to match our Grid.
If you need more control over GridHelper, you could import <GridHelper />
component and override CSS styles.
Here is the sample configuration:
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 <GridSystem />
and define that we want to use Grid Helper:
// Import CSS for GridHelper component
import 'light-react-grid/dist/index.css'
ReactDOM.render(
<React.StrictMode>
<GridSystem
settings={myGridSettings}
useGridHelper={true}
>
<App />
</GridSystem>
</React.StrictMode>,
document.getElementById('root')
);
Please be aware that we are going to use that breakpoint name for size property in <Column />
component.
To set column size we need to write exact column names as they are defined in myGridSettings: <Column size={{sm: 2, md: 3}} />
.
Please checkout example code for more details: example/src.
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%
.
<Grid>
<Column size={{sm: 2, md: 2, lg: 8}} offsetLeft={{md: 2}}></Column>
<Column size={{sm: 2, md: 4}}></Column>
...
</Grid>
In case that we don't need column for some reason in a large breakpoint we can use useBreakpoint
hook to remove it:
const breakpoint = useBreakpoint();
return (<div>
<Grid>
{ breakpoint === 'md' && <Column size={{md: 4}} /> }
<Column size={{sm: 2, md: 4}}></Column>
</Grid>
</div>);
When you define your breakpoints you can always create a wrapper around <Column />
component
and define breakpoints as props.
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<ColumnWrappperProps> = ({
children,
className = '',
sm,
md,
lg,
offsetLeft = {},
offsetRight = {},
}) => (
<Column
size={{ sm, md, lg }}
offsetLeft={offsetLeft}
offsetRight={offsetRight}
className={className}
>
{children}
</Column>
);
Usage:
<Grid>
<ColumnWrapper sm={2} md={4} offsetLeft={{md: 1}} />
</Grid>
I wish u happy coding!
Light React grid is MIT licensed.