how to get current column count

[peyman-hakemi]

Description

I am using the MasonryGrid component in React, and I want to change the alignment from "justify" to "center" when the column count is set to 1. Currently, when I resize the screen and there are two columns, the items are aligned apart from each other. However, when the screen is resized to have one column, the items are aligned to the left instead of being centered. How can I achieve center alignment in this scenario?

  <MasonryGrid
      className="container"
      gap={60}
      defaultDirection={"start"}
      align={"justify"} // want this to be center when column count was 1
      column={0}
      columnSize={0}
      columnSizeRatio={0}
      onRenderComplete={(e) => {
        console.log(e);
      }}
    >
      <ProjectCard
      />
      <ProjectCard
      />
      <ProjectCard
      />
      <ProjectCard
      />
      <ProjectCard
      />
      <ProjectCard
      />
    </MasonryGrid>

[daybrush]

@peyman-hakemi

Calling the .getComputedOutlineLength() method will return the column of items currently being rendered.

[malangfox]

Since there is no further comment, we will close the issue.