Grid Patterns

The Grid pattern is used to create a grid layout. It accepts the following properties:

• columns: The number of columns in the grid.
• gap: The gap between the elements in the stack.
• columnGap: The gap between the elements in the stack horizontally.
• rowGap: The gap between the elements in the stack vertically.
• minChildWidth: The minimum width of the child elements before wrapping.

import { grid } from '../styled-system/patterns'

function App() {
  return (
    <div className={grid({ columns: 3, gap: '6' })}>
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </div>
  )
}