Expo Web
  • Awesome Web!
  • Intro
  • FAQ
  • Anti-Pitch
  • Primitives
    • Intro to Primitives
    • View
    • TextInput
  • Styling
    • Animations
      • animationDelay
      • animationDirection
      • animationDuration
      • animationFillMode
      • animationIterationCount
      • animationKeyframes
      • animationPlayState
      • animationTimingFunction
      • animationDelay
      • animationDirection
      • animationDuration
      • animationFillMode
      • animationIterationCount
      • animationKeyframes
      • animationPlayState
      • animationTimingFunction
    • Aspect Ratio
    • Grids
    • Interactions
    • Text
    • Transforms
    • Transitions
    • View
Powered by GitBook
On this page
  • 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

Was this helpful?

  1. Styling

Grids

PreviousAspect RatioNextInteractions

Last updated 5 years ago

Was this helpful?

The API

Specifies the size of an implicitly-created grid column .

Type: string | number

Conversion

// CSS
- grid-auto-columns: 100px;

// React Native
+ gridAutoColumns: 100,

Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

Type: string

Conversion

// CSS
- grid-auto-flow: auto;

// React Native
+ gridAutoFlow: "auto",

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

Type: string

Conversion

// CSS
- grid-auto-rows: auto;

// React Native
+ gridAutoRows: "auto",

Type: string | number

Conversion

// CSS
- grid-column-end: 2;

// React Native
+ gridColumnEnd: 2,

Type: string | number

Conversion

// CSS
- grid-column-gap: 8;

// React Native
+ gridColumnGap: 8,

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

Conversion

// CSS
- grid-column-start: column;

// React Native
+ gridColumnStart: "column",

Type: string | number

Conversion

// CSS
- grid-row-end: auto;

// React Native
+ gridRowEnd: "auto",

Type: string | number

Conversion

// CSS
- grid-row-gap: 8;

// React Native
+ gridRowGap: 8,

Type: string | number

Conversion

// CSS
- grid-row-start: todo;

// React Native
+ gridRowStart: "todo",

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

Conversion

// CSS
- grid-template-columns: 100px 200px;

// React Native
+ gridTemplateColumns: [100, 200],

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

Conversion

// CSS
- grid-template-rows: 40px 4px 40px;

// React Native
+ gridTemplateRows: [40, 4, 40],

Type: string | 'none'

Conversion

// CSS
- grid-template-areas: "a b c";

// React Native
+ gridTemplateAreas: "a b c",

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 .

Sets the size of the gap () between an element's columns.

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 .

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 .

Sets the size of the gap () between an element's grid rows.

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 .

Defines the line names and track sizing functions of the .

Defines the line names and track sizing functions of the .

Specifies named .

gridAutoColumns
track
gridAutoFlow
gridAutoRows
gridColumnEnd
grid area
gridColumnGap
gutter
gridColumnStart
grid area
gridRowEnd
grid area
gridRowGap
gutter
gridRowStart
grid area
gridTemplateColumns
grid columns
gridTemplateRows
grid rows
gridTemplateAreas
grid areas