Grids
// 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.
// CSS
- grid-auto-flow: auto;
// React Native
+ gridAutoFlow: "auto",
Specifies the size of an implicitly-created grid row track.
// CSS
- grid-auto-rows: auto;
// React Native
+ gridAutoRows: "auto",
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.
// CSS
- grid-column-end: 2;
// React Native
+ gridColumnEnd: 2,
// CSS
- grid-column-gap: 8;
// React Native
+ gridColumnGap: 8,
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.
// CSS
- grid-column-start: column;
// React Native
+ gridColumnStart: "column",
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.
// CSS
- grid-row-end: auto;
// React Native
+ gridRowEnd: "auto",
// CSS
- grid-row-gap: 8;
// React Native
+ gridRowGap: 8,
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.
// CSS
- grid-row-start: todo;
// React Native
+ gridRowStart: "todo",
// CSS
- grid-template-columns: 100px 200px;
// React Native
+ gridTemplateColumns: [100, 200],
// CSS
- grid-template-rows: 40px 4px 40px;
// React Native
+ gridTemplateRows: [40, 4, 40],
// CSS
- grid-template-areas: "a b c";
// React Native
+ gridTemplateAreas: "a b c",
Last modified 3yr ago