Gatsby Componenet Communication Question

I spent a few hours on this yesterday and haven't solved it yet. Hoping for a pointer in the right direction.

*The goal*: Use N number of Gatsby components to add arbitrary numbers of divs to CSS grid where the components are aware of the current grid position so they can apply specific styles.

Details:

- I've got an index.js Gatsby page that has three CSS columns on it.

- The index.js page calls four components.

- Each component adds an arbitrary number of divs which take up spots in the grid (e.g. r1:c1, r1:c2, r1:c3, r2:c1, etc...)

- The components need to know the column and row they are dropping the div into to apply appropriate styles. (e.g. everything in column 3 get a font color, or, the third row gets different background color, or, whatever)

- It's easy enough to track the grid position in the first component. The thing I can't figure out is how to pass the end position of the first component to the second component so it knows where to start. (And then from the second to the third, etc...)

I messed around with callbacks and contexts. I think the answer is in one of them. Just couldn't figure it out. I'm assuming this is possible, but after spending several hours trying to pass variables to graphql queries before learning that's not possible, I'm a little gun shy.

Update:

The solution is to run the queries at the page level so that it can keep track of things and then pass the values down into the components as props.