EvoKit - Grid
The grid for placing content on the page, has 10 columns. Contains two elements <Grid>
and <Grid.Item>
Install
npm install evokit-grid --save
Usage
More about usage
import React from 'react';import Grid from 'evokit-grid';import 'evokit-grid/style.css'; const App = <Grid ='3'> <Grid.Item> ... </Grid.Item> </Grid>;
Props
Also supports other valid props of the React Element. More about use props
<Grid />
Prop name | Default value | Possible value | Description |
---|---|---|---|
grid-align | left |
left center right justify |
Horizontal alignment of cells |
grid-column | auto |
auto 1 2 3 4 5 6 7 8 9 10 expand |
Number of cells in a row |
grid-direction | row |
row row-reverse column column-reverse |
Cell direction |
grid-display | flex |
flex none |
Display type |
grid-divider-column | auto |
auto 1 2 3 4 5 6 7 8 9 10 expand |
Number of cells in a row, only use with prop grid-divider |
grid-divider-indent * |
none |
none xxs xs s m l xl xxl 3xl 4xl 5xl |
Indentation between cells, only use with prop grid-divider |
grid-divider | null |
Create theme | Color border between cells |
grid-height | auto |
auto inherit 1-1 |
Set the height |
grid-indent * |
none |
none xxs xs s m l xl xxl 3xl 4xl 5xl |
Indentation between cells |
grid-valign | top |
top middle bottom baseline justify |
Vertical Cell Alignment |
grid-wrap | wrap |
wrap nowrap wrap-reverse |
Wrap rules |
<Grid.Item />
Prop name | Default value | Possible value | Description |
---|---|---|---|
grid-item-order | null |
1 2 3 4 5 6 7 8 9 10 |
Sets the order of the cell |
grid-item-width | auto |
auto expand 1-1 *-2 *-3 *-4 *-5 *-6 *-7 *-8 *-9 *-10 |
Cell width |
grid-item-display | block |
block none |
Display type |
*
— prop has advanced params
Customize
This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.
@);@);@);@);@);
Live demo
grid-display
Display type
flex
- shown as blockynone
- remove from a document
<Grid ='none'> ...</Grid>
grid-column
Number of cells in a row
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
- Number of cells in a rowauto
- The width of the cells depends on the contentexpand
- The width of the cells is proportional to their count
<Grid ='2'> <Grid.Item> ... </Grid.Item></Grid>
grid-indent
The property allows you to set the indentation value for all sides of an cell at once or to determine it only for specified sides.
Is calculated from content to content.
Advanced props
grid-indent-x
grid-indent-y
Multi values (set value separated by a space)
grid-indent="{1} {2}"
List of values
Value | CSS var | CSS value |
---|---|---|
none |
--- | 0px |
xxs |
--ek-grid-indent-xxs |
5px |
xs |
--ek-grid-indent-xs |
10px |
s |
--ek-grid-indent-s |
15px |
m |
--ek-grid-indent-m |
20px |
l |
--ek-grid-indent-l |
25px |
xl |
--ek-grid-indent-xl |
30px |
xxl |
--ek-grid-indent-xxl |
35px |
3xl |
--ek-grid-indent-3xl |
40px |
4xl |
--ek-grid-indent-4xl |
45px |
5xl |
--ek-grid-indent-5xl |
50px |
<Grid ='xs' /><Grid ='xs xl' /><Grid ='xs' ='xl'/>
grid-direction
Cell direction
row
- Cell direction from left to rightrow-reverse
- Cell direction from right to leftcolumn
- Cell direction from top to bottomcolumn-reverse
- Cell direction from bottom to top
<Grid ='row-reverse'> <Grid.Item> ... </Grid.Item></Grid>
grid-wrap
Wrap cell rules
nowrap
- The location of the cells in one linewrap
- Cells that do not fit one line in width are shifted downwrap-reverse
- Similar behavior withwrap
only cell offset occurs up
<Grid ='nowrap'> <Grid.Item> ... </Grid.Item></Grid>
grid-align
Horizontal alignment of cells
left
- Align cells to the leftcenter
- Center alignment of cellsright
- Align cells to the rightjustify
- Distributes all cells evenly across width
<Grid ='center'> <Grid.Item> ... </Grid.Item></Grid>
grid-valign
Vertical cell alignment
top
- Align cells to topmiddle
- Alignment of cells in the middlebottom
- Alignment of cells to the bottombaseline
- Align cells to baselinejustify
- Evenly distributes all cells in height
<Grid ='middle'> <Grid.Item> ... </Grid.Item></Grid>
grid-height
Set the height
auto
- value:auto
inherit
- value:inherit
1-1
- value:100%
<Grid ='1-1'> ...</Grid>
grid-divider-indent
The property allows you to set the indentation value for all sides of an cell at once or to determine it only for specified sides. Only use with prop grid-divider.
Is calculated from the dividing line to the cell content.
Advanced props
grid-divider-indent-x
grid-divider-indent-y
Multi values (set value separated by a space)
grid-divider-indent="{1} {2}"
List of values
Value | CSS var | CSS value |
---|---|---|
none |
--- | 0px |
xxs |
--ek-grid-indent-xxs |
5px |
xs |
--ek-grid-indent-xs |
10px |
s |
--ek-grid-indent-s |
15px |
m |
--ek-grid-indent-m |
20px |
l |
--ek-grid-indent-l |
25px |
xl |
--ek-grid-indent-xl |
30px |
xxl |
--ek-grid-indent-xxl |
35px |
3xl |
--ek-grid-indent-3xl |
40px |
4xl |
--ek-grid-indent-4xl |
45px |
5xl |
--ek-grid-indent-5xl |
50px |
<Grid ='xs' =/><Grid ='xs xl' =/><Grid ='xs' ='xl' =/>
grid-divider-column
Number of cells in a row. Only use with prop grid-divider.
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
- Number of cells in a rowauto
- The width of the cells depends on the contentexpand
- The width of the cells is proportional to their count
<Grid ='2' => <Grid.Item> ... </Grid.Item></Grid>
grid-divider
Color border between cells
<Grid => <Grid.Item> ... </Grid.Item></Grid>
Set the
THEME_NAME
depending on the theming
grid-item-display
Display type
block
- shown as blockynone
- remove from a document
<Grid > <Grid.Item ='none'> ... </Grid.Item></Grid>
grid-item-order
Sets the order of the cell
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
- Determines the cell order
<Grid> <Grid.Item ='2'> ... </Grid.Item> <Grid.Item> ... </Grid.Item></Grid>
grid-item-width
Cell width
auto
- Cell width depends on content, value:auto
expand
- Cell width occupies free space- See table, for example:
1-2
=50%
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | |
---|---|---|---|---|---|---|---|---|---|---|
1 | 100% |
50% |
33.33% |
25% |
20% |
16.66% |
14.28% |
12.5% |
11.11% |
10% |
2 | --- | --- | 66.66% |
50% |
40% |
33.33% |
28.57% |
25% |
22.22% |
20% |
3 | --- | --- | --- | 75% |
60% |
50% |
42.85% |
37.5% |
33.33% |
30% |
4 | --- | --- | --- | --- | 80% |
66.66% |
57.14% |
50% |
44.44% |
40% |
5 | --- | --- | --- | --- | --- | 83.33% |
71.42% |
62.5% |
55.55% |
50% |
6 | --- | --- | --- | --- | --- | --- | 85.71% |
75% |
66.66% |
60% |
7 | --- | --- | --- | --- | --- | --- | --- | 87.5% |
77.77% |
70% |
8 | --- | --- | --- | --- | --- | --- | --- | --- | 88.88% |
80% |
9 | --- | --- | --- | --- | --- | --- | --- | --- | --- | 90% |
<Grid> <Grid.Item ='expand'> ... </Grid.Item> <Grid.Item ='3-10'> ... </Grid.Item></Grid>