Pillar UI React Grid Component documentation

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:

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 and items 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 and justify 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.