deku-grid
Deku components for a grid based on suitcss/components-grid
Usage
import { Grid, Cell } from 'dominicbarnes/deku-grid';
export function render({ props }) {
return (
<Grid gutter>
<Cell size="1of3">Nav</Cell>
<Cell size="2of3">Main</Cell>
</Grid>
);
}Dependencies
This automatically includes suitcss/components-grid and suitcss/utils-size.
Grid
This is the main container for your grid, includes the Grid class only by default.
Attributes
gutter
When this boolean flag is set, the Grid--withGutter class will be added.
center
When this boolean flag is set, the Grid--alignCenter class will be added.
right
When this boolean flag is set, the Grid--alignRight class will be added.
middle
When this boolean flag is set, the Grid--alignMiddle class will be added.
bottom
When this boolean flag is set, the Grid--alignBottom class will be added.
Cell
This is the main container each of for your grid cells, includes the Grid-cell class only by default.
Attributes
size
This is a required attribute, as excluding it makes little sense. (however, it won't throw an error) It can be any of the following values:
fitfit-altfillfill-altfull{X}of{Y}(eg: "1of2", "2of3", "5of6")
center
When this boolean flag is set, the Grid-cell--center class will be added.