DocSpace-client/packages/components/grid

Grid

A container that lays out its contents in a 2-dimensional grid system. Use Box components to define rows and columns.

Usage

import Grid from "@docspace/components/grid";

<Grid />

Properties

Props	Type	Required	Values	Default	Description
alignContent	string	-	-	-	sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis
alignItems	string	-	-	-	sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
alignSelf	string	-	-	-	overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
areasProp	array	-	[["header","header"],["navbar","main"]], [{ name: "header", start: [0, 0], end: [1, 0] }, { name: "navbar", start: [0, 1], end: [0, 1] }, { name: "main", start: [1, 1], end: [1, 1] }]	-	specifies named grid areas. Takes value as array of string arrays that specify named grid areas. Or objects array, that contains names and coordinates of areas.
columnsProp	string,array,object	-	"25%", ["200px", ["100px","1fr"], "auto"], { count: 3, size: "100px" }	-	defines the sizing of the grid columns. Specifying a single string will repeat several columns of this size. Specifying an object allows you to specify the number of repetitions and the size of the column. Or you can specify an array with column sizes. The column size can be specified as an array of minimum and maximum widths.
gridArea	string	-	-	-	is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
gridColumnGap	string	-	-	-	sets the size of the gap (gutter) between an element's columns.
gridGap	string	-	-	-	sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
gridRowGap	string	-	-	-	sets the size of the gap (gutter) between an element's grid rows.
heightProp	string	-	-	100%	defines the height of the border of the element area.
justifyContent	string	-	-	-	defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
justifyItems	string	-	-	-	defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
justifySelf	string	-	-	-	sets the way a box is justified inside its alignment container along the appropriate axis.
marginProp	string	-	-	-	sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
paddingProp	string	-	-	-	sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left
rowsProp	string,array	-	"50px", ["100px", ["100px","1fr"], "auto"]	-	defines the sizing of the grid rows. Specifying a single string will repeat several rows of this size. Or you can specify an array with rows sizes. The row size can be specified as an array of minimum and maximum heights.
widthProp	string	-	-	100%	defines the width of the border of the element area.