Hi. I fount the unexpected behavior when using `grid-column`

[nayounsang]

Description

.grid-c_2 {
    grid-column: span 2 / span 2;
}

When I use gridColumn: number in { css } from "@/styled-system/css";, It is converted to unexpected css.

Link to Reproduction

https://play.panda-css.com/dq7CyJZHZD

Steps to reproduce

1. import { css } from "@/styled-system/css";
2. <div className={css({ gridColumn: 2 })}>{children}</div> or <div className={css({ gridColumn: "2" })}>{children}</div>
3. Converted to

   .grid-c_2 {
   grid-column: span 2 / span 2;
   }

4. It is not

   .grid-c_2 {
   grid-column: 2;
   }

   I see the unexpected layout.

JS Framework

React, Nextjs

Panda CSS Version

0.42.0

Browser

Chrome 93

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

Is this indented feature? I can't find this topic when search for grid or column in docs. I'm in a situation where it's good to use explicit numbers to meet the designer's requirements.

[nayounsang]

As a temporary solution, I use the style prop to overwrite css at runtime.

 <div className={css({ gridColumn: N })} style={{gridColumn:N}}>{children}</div>

If you can't afford to edit it, please let me know where this is implemented and I'll create a PR.

[anubra266]

@nayounsang It's the definition from base preset https://github.com/chakra-ui/panda/blob/main/packages/preset-base/src/utilities/flex-and-grid.ts#L106

[nayounsang]

@nayounsang It's the definition from base preset https://github.com/chakra-ui/panda/blob/main/packages/preset-base/src/utilities/flex-and-grid.ts#L106

If so, this appears to be intentional. It doesn't look good to change that itself. There is a way for developers to overwrite it themselves with config. But, It is good if there is a feature that specify numbers directly. Such as...

  gridColumn: {
    className: 'grid-c',
    group: 'Grid Layout',
    values: {
      full: '1 / -1',
      '1': 'span 1 / span 1',
      '2': 'span 2 / span 2',
      '3': 'span 3 / span 3',
      '4': 'span 4 / span 4',
      '5': 'span 5 / span 5',
      '6': 'span 6 / span 6',
      '7': 'span 7 / span 7',
      '8': 'span 8 / span 8',
      '9': 'span 9 / span 9',
      '10': 'span 10 / span 10',
      '11': 'span 11 / span 11',
      '12': 'span 12 / span 12',
      // ...
      's1':1,
      's2':2,
      's3':3,
       // ...
    },
  },

Is there a better way? I'm curious about devleoper's opinion.