Grid 🗑️
Este componente está descontinuado. Substitua pelo Grid next. Para mais informações sobre os recursos next leia a documentação.
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>
children​
Feedback​
Para reportar algum problema, solicitar novos Ăcones, solicitar novos casos de uso de componentes, tirar dĂşvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.