Layout type

• Grid
• Columns (stretch)
• Columns (center)
• Columns (left)
• Columns (right)
• Rows (stretch)
• Rows (center)
• Rows (top)
• Rows (bottom)

Grid

Grid cells with fixed width/height.

Property	Default Value	Description
size	(no)	Size (in pixel) of grid cell.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IGrid type to define this type of grid:

import { IGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'grid',
    color: '#78909C',
    opacity: 1,
    size: 24
} as IGrid;

initializeGrid([{ grids: [grid] }]);

Columns (stretch)

Columns grid stretched to 100% width.

Property	Default Value	Description
count	(no)	Count of columns.
gutter	(no)	Space between columns in pixels.
margin	(no)	Left/right margin of grid in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IColumnsStretchGrid type to define this type of grid:

import { IColumnsStretchGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'columns-stretch',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 16,
    margin: 16
} as IColumnsStretchGrid;

initializeGrid([{ grids: [grid] }]);

Columns (center)

Centered columns grid.

Property	Default Value	Description
count	(no)	Count of columns.
gutter	(no)	Space between columns in pixels.
width	(no)	Coulmn width in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IColumnsCenterGrid type to define this type of grid:

import { IColumnsCenterGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'columns-center',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 32,
    width: 64
} as IColumnsCenterGrid;

initializeGrid([{ grids: [grid] }]);

Columns (left)

Columns grid aligned to the left.

Property	Default Value	Description
count	auto	Count of columns. If not defined, the grid will fulfill all available space.
gutter	(no)	Space between columns in pixels.
offset	(no)	Offset of grid from the left in pixels.
width	(no)	Coulmn width in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IColumnsLeftGrid type to define this type of grid:

import { IColumnsLeftGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'columns-left',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 32,
    offset: 16,
    width: 64
} as IColumnsLeftGrid;

initializeGrid([{ grids: [grid] }]);

Columns (right)

Columns grid aligned to the right.

Property	Default Value	Description
count	auto	Count of columns. If not defined, the grid will fulfill all available space.
gutter	(no)	Space between columns in pixels.
offset	(no)	Offset of grid from the right in pixels.
width	(no)	Coulmn width in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IColumnsRightGrid type to define this type of grid:

import { IColumnsRightGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'columns-right',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 32,
    offset: 16,
    width: 64
} as IColumnsRightGrid;

initializeGrid([{ grids: [grid] }]);

Rows (stretch)

Rows grid stretched to 100% height.

Property	Default Value	Description
count	(no)	Count of rows.
gutter	(no)	Space between rows in pixels.
margin	(no)	Top/bottom margin of grid in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IRowsStretchGrid type to define this type of grid:

import { IRowsStretchGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'rows-stretch',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 32,
    margin: 16
} as IRowsStretchGrid;

initializeGrid([{ grids: [grid] }]);

Rows (center)

Centered rows grid.

Property	Default Value	Description
count	(no)	Count of rows.
gutter	(no)	Space between rows in pixels.
height	(no)	Row height in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IRowsCenterGrid type to define this type of grid:

import { IRowsCenterGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'rows-center',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 16,
    height: 32
} as IRowsCenterGrid;

initializeGrid([{ grids: [grid] }]);

Rows (top)

Rows grid aligned to the top.

Property	Default Value	Description
count	auto	Count of rows. If not defined, the grid will fulfill all available space.
gutter	(no)	Space between rows in pixels.
offset	(no)	Offset of grid from the top in pixels.
height	(no)	Row height in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IRowsTopGrid type to define this type of grid:

import { IRowsTopGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'rows-top',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 16,
    offset: 16,
    height: 32
} as IRowsTopGrid;

initializeGrid([{ grids: [grid] }]);

Rows (bottom)

Rows grid aligned to the bottom.

Property	Default Value	Description
count	auto	Count of rows. If not defined, the grid will fulfill all available space.
gutter	(no)	Space between rows in pixels.
offset	(no)	Offset of grid from the bottom in pixels.
height	(no)	Row height in pixels.
color	(no)	Color code for grid lines.
opacity	1	Opacity of the grid line (0 - 0%, 0.5 - 50%, 1 - 100%, etc)

Use IRowsBottomGrid type to define this type of grid:

import { IRowsBottomGrid, initializeGrid } from '@sergeyzwezdin/pixelgrid';

const grid = {
    type: 'rows-bottom',
    color: '#78909C',
    opacity: 1,
    count: 8,
    gutter: 16,
    offset: 16,
    height: 32
} as IRowsBottomGrid;

initializeGrid([{ grids: [grid] }]);