Grid

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

Example

1  import { Grid, Box } from '@haktos/sugarcoat-ui';
2
3  <Grid gap='3' columns='4'>
4    <Box css={{ height: '$9', bg: '$primary200' }}></Box>
5    <Box css={{ height: '$7', bg: '$primary200' }}></Box>
6    <Box css={{ height: '$7', bg: '$primary200' }}></Box>
7    <Box css={{ height: '$7', bg: '$primary200' }}></Box>
8    <Box css={{ height: '$7', bg: '$primary200' }}></Box>
9    <Box css={{ height: '$7', bg: '$primary200' }}></Box>
10    <Box css={{ height: '$7', bg: '$primary200' }}></Box>
11  </Grid>
12

API Reference

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

Component Properties

Grid

Prop	Type	Default	Explanation
`columns`	`string`	-	Defines the number of columns in the grid, structuring the horizontal space into equal or custom-sized sections.
`rows`	`string`	-	Specifies the number of rows in the grid, organizing the vertical space into equal or custom-sized sections.
`justify`	`string`	-	Sets how the items are spaced out horizontally within the grid, allowing for better control over alignment and distribution.
`items`	`string`	-	Determines how items align vertically within their grid area, helping you to control their position with ease.
`flow`	`string`	-	Directs how items fill into the grid, 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 grid 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 grid.
`gapY`	`string`	-	Sets the spacing between rows, giving you the flexibility to precisely control the vertical gaps within the grid.