evokit-grid
v3.3.0
Published
The grid for placing content on the page, has 10 columns
Downloads
3,752
Maintainers
Readme
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 grid-column='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.
@custom-media --ek-grid-media-small only screen and (min-width: 480px);
@custom-media --ek-grid-media-medium only screen and (min-width: 768px);
@custom-media --ek-grid-media-large only screen and (min-width: 960px);
@custom-media --ek-grid-media-wide only screen and (min-width: 1200px);
@custom-media --ek-grid-media-huge only screen and (min-width: 1400px);
:root {
/* prop 'grid-indent' */
--ek-grid-indent-xxs: 5px;
--ek-grid-indent-xs: 10px;
--ek-grid-indent-s: 15px;
--ek-grid-indent-m: 20px;
--ek-grid-indent-l: 25px;
--ek-grid-indent-xl: 30px;
--ek-grid-indent-xxl: 35px;
--ek-grid-indent-3xl: 40px;
--ek-grid-indent-4xl: 45px;
--ek-grid-indent-5xl: 50px;
}
Live demo
grid-display
Display type
flex
- shown as blockynone
- remove from a document
<Grid grid-display='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 grid-column='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 grid-indent='xs' />
<Grid grid-indent='xs xl' />
<Grid
grid-indent-x='xs'
grid-indent-y='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 grid-direction='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 grid-wrap='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 grid-align='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 grid-valign='middle'>
<Grid.Item>
...
</Grid.Item>
</Grid>
grid-height
Set the height
auto
- value:auto
inherit
- value:inherit
1-1
- value:100%
<Grid grid-height='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
grid-divider-indent='xs'
grid-divider={THEME_NAME}
/>
<Grid
grid-divider-indent='xs xl'
grid-divider={THEME_NAME}
/>
<Grid
grid-divider-indent-x='xs'
grid-divider-indent-y='xl'
grid-divider={THEME_NAME}
/>
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 grid-divider-column='2' grid-divider={THEME_NAME}>
<Grid.Item>
...
</Grid.Item>
</Grid>
grid-divider
Color border between cells
<Grid grid-divider={THEME_NAME}>
<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 grid-item-display='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 grid-item-order='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 grid-item-width='expand'>
...
</Grid.Item>
<Grid.Item grid-item-width='3-10'>
...
</Grid.Item>
</Grid>