Pillar UI React Grid Component documentation
Effortlessly create responsive and customizable grid layouts for your React applications. Arrange content with flexibility and precision using a versatile Grid component.
Components:
Grid GridItem
Type
Components
import
import { Pillar UI React Grid Component } from '@pillar-ui/core'
Usage
import { Grid, GridItem } from '@pillar-ui/core'
function App() {
return (
<Grid grid="1fr 1fr 1fr" gap="md" items="center" justify="between">
<GridItem placement="1 / 2 x span 2 / span 3">{/* Your content here */}</GridItem>
<GridItem placement="auto / auto x auto / span 2">{/* Your content here */}</GridItem>
</Grid>
)
}
Props
Grid
The Grid component accepts the following props:
Grid Size Breakpoints
xs
,sm
,md
,lg
,xl
: string- These props define the grid's layout for different screen sizes. They set the grid template based on the screen width.
export const GridGap = () => {
return (
<Paper className="playground" borderColor="opa-6" ="sm" background="bg-3" corner="sm">
<Grid grid="repeat(5, 1fr)" gap="2xs">
{boxes}
</Grid>
<Grid grid="repeat(5, 1fr)" gap="xs">
{boxes}
</Grid>
<Grid grid="repeat(5, 1fr)" gap="sm">
{boxes}
</Grid>
<Grid grid="repeat(5, 1fr)" gap="md">
{boxes}
</Grid>
<Grid grid="repeat(5, 1fr)" gap="lg">
{boxes}
</Grid>
<Grid grid="repeat(5, 1fr)" gap="xl">
{boxes}
</Grid>
<Grid grid="repeat(5, 1fr)" gap="2xl">
{boxes}
</Grid>
</Paper>
)
}
Grid
- Type: string
- The prop that defines the number of columns in the grid.
import { Grid } from '@pillar-ui/core'
const GridGrid = () => {
return (
<Paper className="playground" borderColor="opa-6" ="sm" background="bg-3" corner="sm">
<Grid grid="repeat(5, 1fr)" gap="sm">
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
<div style="height:40px" />
</Grid>
</Paper>
)
}
GridItem
The GridItem component accepts the following props:
Header
sidebar
main
sidebar
Footer
import { Grid } from '@pillar-ui/core'
const GridItems = () => {
return (
<Grid grid="100px 1fr 100px x 2rem minmax(6rem, 1fr) 2rem" gap="sm">
<Grid.Item placement="2/4" style={{ background: 'var(--interface-8)' }}>
Header
</Grid.Item>
<Grid.Item placement="span 1 x 1 / span 3" style={{ background: 'var(--interface-8)' }}>
sidebar
</Grid.Item>
<Grid.Item placement="2 / 3" style={{ background: 'var(--interface-8)' }}>
main
</Grid.Item>
<Grid.Item placement="3 / 4" style={{ background: 'var(--interface-8)' }}>
sidebar
</Grid.Item>
<Grid.Item placement="2 / span 2" style={{ background: 'var(--interface-8)' }}>
Footer
</Grid.Item>
</Grid>
)
}
Best Practices
- Utilize the Grid component to create responsive layouts, adjusting the design based on the screen size.
- Use the
placement
prop in the GridItem for exact positioning within the Grid. - Apply the
gap
prop in the Grid component to manage the spacing between GridItems without needing external styles or spacing components. - Utilize
justify
anditems
props to align and justify content, enhancing the layout's flexibility and responsiveness.
Use Cases
- Crafting complex, responsive layouts for web applications.
- Aligning and distributing space between items within a layout.
- Precise positioning of components or elements in a grid system for various screen sizes.
Troubleshooting
- Ensure that the GridItems are direct children of the Grid component.
- Check the values of the
placement
,grid
,gap
, and size breakpoints props for validity and compatibility. - For issues with alignment or justification, validate the values of the
items
andjustify
props.
Conclusion
The Grid component serves as a robust solution for creating adaptable and organized layouts in your applications. It provides a range of options to design responsive, precise, and aesthetically pleasing interfaces, ensuring an enhanced user experience.