@djx/grid
Representing a configurable flexgrid
Installation
npm install --save @djx/grid
Usage
Make sure you import the component somewehere in your application first:
import '@djx/grid';
You can then use it like normal web components in your markup:
<djx-grid>
<djx-grid-row>
<djx-grid-col xs="12" lg="6">
<span>Width 12 at XS and 6 at LG</span>
</djx-grid-col>
<djx-grid-col xs="12" lg="6">
<span>Width 12 at XS and 6 at LG</span>
</djx-grid-col>
</djx-grid-row>
<djx-grid-row>
<djx-grid-col xs="12" lg="[6, 3]">
<span>Width 12 at XS and 6 with 3 offset at LG</span>
</djx-grid-col>
<djx-grid-col xs="12" lg="[6, 3]">
<span>Width 12 at XS and 6 with 3 offset at LG</span>
</djx-grid-col>
</djx-grid-row>
<djx-grid-row>
<djx-grid-col xs="6" lg="[6, 0, 2]">
<span>Width 6 at XS and 6 with 0 offset and switched order at LG</span>
</djx-grid-col>
<djx-grid-col xs="6" lg="[6, 0, 1]">
<span>Width 6 at XS and 6 with 0 offset switched order at LG</span>
</djx-grid-col>
</djx-grid-row>
</djx-grid>
The value for the breakpoints has always this format:
number
or[ number, number?, number? ]
[ number, number?, number? ]
translates to [ width, offset, order ]
Variables
Name | Description | Default |
---|---|---|
DJX_GRID.columns | The max colums to render | 12 |
DJX_GRID.gutterMin | Min width of the gutter | 20px |
DJX_GRID.gutterMax | Max width of the gutter | 20px |
DJX_GRID.marginMin | Min left and right margin | |
DJX_GRID.marginMax | Max left and right margin | 70px |
For more variables see here