0.0.1 • Published 10 months ago
@gluestack-ui/grid v0.0.1
@gluestack-ui/grid
Installation
To use @gluestack-ui/grid
, all you need to do is install the
@gluestack-ui/grid
package:
$ yarn add @gluestack-ui/grid
# or
$ npm i @gluestack-ui/grid
Usage
When you need to Grid-align content, the Grid component comes in handy. It is a layout component that can be used with other components to create complex layouts and positioning.
import { createGrid } from '@gluestack-ui/grid';
import { Parent, Root, Item } from './styled-components';
export const Gridn = createGrid({
Parent,
Root,
Item,
});
Customizing the Grid:
Default styling of all these components can be found in the components/core/grid file. For reference, you can view the source code of the styled grid
components.
// import the styles
import { Parent, Root, Item } from '../components/core/grid/styled-components';
// import the createGrid function
import { createGrid } from '@gluestack-ui/grid';
// Understanding the API
const Grid = createGrid({
Parent,
Root,
Item,
});
// Using the GRID component
export default () => (
<Grid>
<GridItem></GridItem>
</Grid>
);
More guides on how to get started are available here.
0.0.1
10 months ago