WUI logo

Grid

The Grid component is a layout element that creates a structured, responsive grid system for arranging content in rows and columns. It provides a flexible framework for designing complex layouts, ensuring consistent spacing and alignment. This component is essential for building organized, adaptive interfaces that maintain their structure across various screen sizes and devices.

Source@welcome-ui/grid
OverviewProps
import * as React from 'react'
import { Grid } from '@welcome-ui/grid'
import { Box } from '@welcome-ui/box'


const Example = () => {
  return (
    <Grid gap="md" templateColumns="repeat(5, 1fr)">
      <Box backgroundColor="sub-1" h={50} w="100%" />
      <Box backgroundColor="sub-3" h={50} w="100%" />
      <Box backgroundColor="sub-4" h={50} w="100%" />
      <Box backgroundColor="sub-5" h={50} w="100%" />
      <Box backgroundColor="sub-2" h={50} w="100%" />
    </Grid>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/grid
2

Import component:

import { Grid } from '@welcome-ui/grid'

Examples

With the Grid component use shorthand props:

  • gridArea is area
  • gridAutoColumns is autoColumns
  • gridAutoFlow is autoFlow
  • gridAutoRows is autoRows
  • gridColumn is column
  • columnGap is columnGap
  • gridGap is gap
  • gridRow is row
  • GridRowGap is rowGap
  • gridTemplateAreas is templateAreas
  • gridTemplateColumns is templateColumns
  • gridTemplateRows is templateRows

Grid Item

With the Grid.Item component use shorthand props:

  • gridArea is area
  • gridColumn is column
  • gridRow is row
FlexLoader