Is centering a 2D grid possible when the container is bigger than the content inside it?

[decipher-cs]

experimental_VGrid is bigger than the collection of cells inside it. This is because the cells can grow in size to fill the entire screen if needed. Applying styles directly to the style prop of vGrid doesn't seem to do anything. Does virtua has support of this type of thing or will the content always be on the top left?

return (
    <VGrid
        style={{ height: 700, background: 'red' }}

        row={rows}
        col={columns}

        cellWidth={cellSize + GAP}
        cellHeight={cellSize + GAP}
    >
        {({ rowIndex, colIndex }) => (
            <Cell index={rowIndex * columns + colIndex}/>
        )}
    </VGrid>
)

[inokawa]

experimental_VGrid is experimental component and it may not work in some situations. I can't understand the exact situation without reproduction, but probably growing cell is not supported.

[decipher-cs]

I think you misunderstood what I was trying to say. I wasn't asking about the growing cell thing, it's entirely unrelated and I said it to add context. I'll try to be more clear but I just want to center the grid. The good ol' how do I center a div?

The red area in the screenshot is your experimental_VGrid. I just want to center its contents. display: grid, placeContent: center doesn't work.

<VGrid
    style={{ height: 700, 
        background: 'red', 
        display: 'grid', // has no effect
        placeContent: 'center', // has no effect
    }}
    row={rows}
    col={columns}
    cellWidth={cellSize + GAP}
    cellHeight={cellSize + GAP}
>
    {({ rowIndex, colIndex }) => (
        <Cell index={rowIndex * columns + colIndex} cellTypeToPlaceOnClick={cellTypeToPlaceOnClick} />
    )}
</VGrid>

i hope the illustration helps.

so basically, the vgrid is around 1000 x 700 pixels but the content of vgrid is only around 300 x 300 pixels. I want to center the contents but the style prop of vGrid only gives access to the top-most container which is why I think setting grid and placeContent not working.

[inokawa]

Thank you for your clarification. For list virtualization, similar situation is supported with WindowVirtualizer but not supported for grid yet.

[decipher-cs]

Do you plan on supporting it?

[inokawa]

I'm planning to rebuild VGrid with css grid in #124 . Maybe supported in it but not soon.