I have a grid layout made of 9 columns and 5 rows so 45 cells

Now I need to place a dynamic number of circles in this layout. The number of circles varies from a minimum of 1 to a maximum of 9. The position of these circles in the grid should follow the following rules:

So:

• if the number of circle is 1, the circle center should be in the cell of column 5 and row 3
• if the number of circles is 2, the first circle center should be in the cell of column 3 and row 3 and the second circle center should be in the cell of column 7 and row 3
• …

The radius of the circle can varie too, but at the moment is not important since I was thinking to place circles in absolute.

How can I do that? Is there a library or something like that that can help me?
I’m using React.

Here a codesandbox