GridView

Lay it all out in style with our GridView. A structural whizz that presents your content just right

Example

1  import { GridView, Box } from '@sugarcoat/ui';
2
3  <GridView gap={3} columns={4}>
4    <Box css={{ height: '11' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
5    <Box css={{ height: '9' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
6    <Box css={{ height: '9' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
7    <Box css={{ height: '9' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
8    <Box css={{ height: '9' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
9    <Box css={{ height: '9' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
10    <Box css={{ height: '9' }} style={{backgroundColor: 'var(--sui-colors-neutral-a6)'}}></Box>
11  </GridView>
12

API Reference

Component	Description
GridView	The grand architect of layouts. A powerful component that effortlessly arranges your content into a FlexBoxible, responsive GridView system, making your UI structured and visually balanced.

Component Properties

GridView

Prop	Type	Default	Explanation
`columns`	`string`	-	Defines the number of columns in the GridView, structuring the horizontal space into equal or custom-sized sections.
`rows`	`string`	-	Specifies the number of rows in the GridView, organizing the vertical space into equal or custom-sized sections.
`justify`	`string`	-	Sets how the items are spaced out horizontally within the GridView, allowing for better control over alignment and distribution.
`items`	`string`	-	Determines how items align vertically within their GridView area, helping you to control their position with ease.
`flow`	`string`	-	Directs how items fill into the GridView, deciding whether they flow row by row or column by column, giving you control over the layout flow.
`gap`	`string`	-	Sets uniform spacing between both rows and columns, giving your GridView items some much-needed room to breathe.
`gapX`	`string`	-	Sets the spacing between columns, allowing for a more refined control over the horizontal gaps within the GridView.
`gapY`	`string`	-	Sets the spacing between rows, giving you the FlexBoxibility to precisely control the vertical gaps within the GridView.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius