@@ -149,12 +149,12 @@ function GapVirtualizer() {
149
149
style = { {
150
150
position : 'absolute' ,
151
151
top : 0 ,
152
- left : `calc((${ virtualRow . index % numLanes } * 100% / ${ numLanes } ) + ( ${ columnGap } px * ( ${ virtualRow . index % numLanes } ) / ${ numLanes } ) )` ,
153
- width : `calc((100% / ${ numLanes } ) - (${ columnGap } px * ( ${ numLanes } - 1) / ${ numLanes } ))` ,
152
+ "--start-ratio" : `calc(mod (${ virtualRow . index } , ${ numLanes } ) / ${ numLanes } )` ,
153
+ left : `calc((var(--start-ratio) * 100%) + (${ columnGap } px * var(--start-ratio) ))` ,
154
154
height : `${ virtualRow . size } px` ,
155
155
transform : `translateY(${ virtualRow . start } px)` ,
156
156
outline : '1px solid red' ,
157
- } }
157
+ } as React . CSSProperties }
158
158
>
159
159
Cell { virtualRow . index }
160
160
</ div >
@@ -245,12 +245,13 @@ function ResizeVirtualizer() {
245
245
style = { {
246
246
position : 'absolute' ,
247
247
top : 0 ,
248
- left : `calc((${ virtualRow . index % numLanes } * 100% / ${ numLanes } ) + (${ columnGap } px * (${ virtualRow . index % numLanes } ) / ${ numLanes } ))` ,
248
+ "--start-ratio" : `calc(mod(${ virtualRow . index } , ${ numLanes } ) / ${ numLanes } )` ,
249
+ left : `calc((var(--start-ratio) * 100%) + (${ columnGap } px * var(--start-ratio)))` ,
249
250
width : `calc((100% / ${ numLanes } ) - (${ columnGap } px * (${ numLanes } - 1) / ${ numLanes } ))` ,
250
251
height : `${ virtualRow . size } px` ,
251
252
transform : `translateY(${ virtualRow . start } px)` ,
252
253
outline : '1px solid red' ,
253
- } }
254
+ } as React . CSSProperties }
254
255
>
255
256
Cell { virtualRow . index }
256
257
</ div >
0 commit comments