Grid
Import
import { Grid } from '@resultadosdigitais/tangram-components'
Properties
fluid
children
<GridColumn />
Import
import { GridColumn } from '@resultadosdigitais/tangram-components'
Properties
smallMobile
| Type | number |
|---|---|
| Default | null |
Description
Sets the number of columns on screens small mobile.
Available values are range from 1 to 12.
mobile
| Type | number |
|---|---|
| Default | null |
Description
Sets the number of columns on screens mobile.
Available values are range from 1 to 12.
tablet
| Type | number |
|---|---|
| Default | null |
Description
Sets the number of columns on screens tablet.
Available values are range from 1 to 12.
desktop
| Type | number |
|---|---|
| Default | null |
Description
Sets the number of columns on screens desktop.
Available values are range from 1 to 12.
largeDesktop
| Type | number |
|---|---|
| Default | null |
Description
Sets the number of columns on screens large desktop.
Available values are range from 1 to 12.
offset
withoutGutter
children
<GridRow />
Import
import { GridRow } from '@resultadosdigitais/tangram-components'
Properties
reverse
| Type | bool | array |
|---|---|
| Default | [] |
Description
Reverses the direction of the row.
// Can be an array. Reverses for only included viewports.
<Grid.Row reverse={[Grid.viewports.mobile, Grid.viewports.desktop]}></Grid.Row>
// When is a boolean, reverses for all breakpoints.
<Grid.Row reverse></Grid.Row>
align
| Type | string | object |
|---|---|
| Default | null |
Description
Align the content vertically.
You can use all CSS align-items values:
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
// Can be a string:
<Grid.Row align="flex-end"></Grid.Row>
// Or an object:
<Grid.Row align={{smallMobile: 'center', desktop: 'flex-end'}}></Grid.Row>
justify
| Type | string | object |
|---|---|
| Default | null |
Description
Align the content horizontally.
You can use all CSS justify-content values:
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
// Can be a string:
<Grid.Row justify="center"></Grid.Row>
// Or an object:
<Grid.Row justify={{smallMobile: 'center', desktop: 'flex-end'}}></Grid.Row>