Layout

Shakti contains several components for designing layouts, including a flexbox-based grid system.

Grid System

The grid system is loosely similar to Bootstrap's grid structure:

<Grid bgColor="#feccfe" borderRadius={8} textCenter>
    <Row>
        <Col>🌲</Col>
        <Col>🍄</Col>
    </Row>
    <Row>
        <Col>🍁</Col>
    </Row>
</Grid>

🌲

🍄

🍁

All of the grid components (Grid, Row, and Col) have flex enabled by default, and all Flex props apply.

`Grid`

Serves as a container component for a layout. Rows (Row) are nested within. Grid is flex-enabled with column direction by default.

`Row`

Represents a physical row in a layout. Columns (Col) are nested within. Row is flex-enabled with row direction by default.

`Col`

Represents a physical column in a layout. Nested within a Row. Col is flex-enabled with column direction by default.

Prop	Type	Notes
size	number	relative width of column in row (defaults to 1)
showBelow	string	media breakpoint to show column at (shown at breakpoint or smaller)
showAbove	string	media breakpoint to show column at (shown at breakpoint or larger)
hideBelow	string	media breakpoint to hide column at (hidden at breakpoint or smaller)
hideAbove	string	media breakpoint to hide column at (hidden at breakpoint or larger)

Other

Aside from the grid system components, there are some other layout components designed to be used independently.

`View`

Vanilla div with the ability to augment via Base props.

`Flex`

Same as View, but with flex enabled by default and access to Flex props:

Prop	Type	Notes
flexRow	boolean	set flex direction to row
flexCol	boolean	set flex direction to column
flexRowReverse	boolean	set flex direction to row-reverse
flexColReverse	boolean	set flex direction to column-reverse
alignStart	boolean	align items to flex-start
alignEnd	boolean	align-items to flex-end
alignCenter	boolean	align items to center
alignBaseline	boolean	align items to baseline
justifyStart	boolean	justify content to flex-start
justifyEnd	boolean	justify content to flex-end
justifyCenter	boolean	justify content to center
justifyBaseline	boolean	justify content to baseline
justifySpaceAround	boolean	justify content with space around
justifySpaceBetween	boolean	justify content with space between

Base

Text