raster grid with gap

example.js

import Grid from './components/grid'

export default function Grid({ children, gap, ...props }) {
  return (
    <Grid gap={32} col={4}>
      <r-cell>cell</r-cell>
      <r-cell>cell</r-cell>
      <r-cell>cell</r-cell>
      <r-cell>cell</r-cell>
    </Grid>
  )
}

grid.css

r-grid {
  --grid-tc: repeat(4, 1fr);
  --grid-cs: 1; /* column start */
  --grid-ce: -1; /* column end */
  --grid-gap: 0;
  
  display: grid;
  grid-template-columns: var(--grid-tc);
  grid-gap: var(--grid-gap);
}

/*

raster other styless... 

*/

grid.js

export default function Grid({ children, gap, ...props }) {
  return (
    <r-grid style={gap ? { '--grid-gap': `${gap}px` } : null} {...props}>
      {children}
    </r-grid>
  )
}