Open nayounsang opened 2 weeks ago
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.
@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 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.
Description
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
import { css } from "@/styled-system/css";
<div className={css({ gridColumn: 2 })}>{children}</div>
or<div className={css({ gridColumn: "2" })}>{children}</div>
I see the unexpected layout.
JS Framework
React, Nextjs
Panda CSS Version
0.42.0
Browser
Chrome 93
Operating System
Additional Information
Is this indented feature? I can't find this topic when search for
grid
orcolumn
in docs. I'm in a situation where it's good to use explicit numbers to meet the designer's requirements.