Expo Web
Search…
Expo Web
Awesome Web!
Intro
FAQ
Anti-Pitch
Primitives
Intro to Primitives
View
TextInput
Styling
Animations
Aspect Ratio
Grids
Interactions
Text
Transforms
Transitions
View
Powered By GitBook
Grids

The API

Specifies the size of an implicitly-created grid column track.

Type: string | number

Conversion

1
// CSS
2
- grid-auto-columns: 100px;
3
​
4
// React Native
5
+ gridAutoColumns: 100,
Copied!
Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

Type: string

Conversion

1
// CSS
2
- grid-auto-flow: auto;
3
​
4
// React Native
5
+ gridAutoFlow: "auto",
Copied!
Specifies the size of an implicitly-created grid row track.

Type: string

Conversion

1
// CSS
2
- grid-auto-rows: auto;
3
​
4
// React Native
5
+ gridAutoRows: "auto",
Copied!
Specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

Type: string | number

Conversion

1
// CSS
2
- grid-column-end: 2;
3
​
4
// React Native
5
+ gridColumnEnd: 2,
Copied!
Sets the size of the gap (gutter) between an element's columns.

Type: string | number

Conversion

1
// CSS
2
- grid-column-gap: 8;
3
​
4
// React Native
5
+ gridColumnGap: 8,
Copied!
Specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.

Type: 'row' | 'column' | 'dense'

Conversion

1
// CSS
2
- grid-column-start: column;
3
​
4
// React Native
5
+ gridColumnStart: "column",
Copied!
Specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

Type: string | number

Conversion

1
// CSS
2
- grid-row-end: auto;
3
​
4
// React Native
5
+ gridRowEnd: "auto",
Copied!
Sets the size of the gap (gutter) between an element's grid rows.

Type: string | number

Conversion

1
// CSS
2
- grid-row-gap: 8;
3
​
4
// React Native
5
+ gridRowGap: 8,
Copied!
Specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

Type: string | number

Conversion

1
// CSS
2
- grid-row-start: todo;
3
​
4
// React Native
5
+ gridRowStart: "todo",
Copied!
Defines the line names and track sizing functions of the grid columns.

Type: string | number | Array<string | number>

Conversion

1
// CSS
2
- grid-template-columns: 100px 200px;
3
​
4
// React Native
5
+ gridTemplateColumns: [100, 200],
Copied!
Defines the line names and track sizing functions of the grid rows.

Type: string | number | Array<string | number>

Conversion

1
// CSS
2
- grid-template-rows: 40px 4px 40px;
3
​
4
// React Native
5
+ gridTemplateRows: [40, 4, 40],
Copied!
Specifies named grid areas.

Type: string | 'none'

Conversion

1
// CSS
2
- grid-template-areas: "a b c";
3
​
4
// React Native
5
+ gridTemplateAreas: "a b c",
Copied!
Styling - Previous
Aspect Ratio
Next - Styling
Interactions
Last modified 2yr ago
Copy link
Contents
The API
gridAutoColumns
Type: string | number
Conversion
gridAutoFlow
Type: string
Conversion
gridAutoRows
Type: string
Conversion
gridColumnEnd
Type: string | number
Conversion
gridColumnGap
Type: string | number
Conversion
gridColumnStart
Type: 'row' | 'column' | 'dense'
Conversion
gridRowEnd
Type: string | number
Conversion
gridRowGap
Type: string | number
Conversion
gridRowStart
Type: string | number
Conversion
gridTemplateColumns
Type: string | number | Array<string | number>
Conversion
gridTemplateRows
Type: string | number | Array<string | number>
Conversion
gridTemplateAreas
Type: string | 'none'
Conversion