CSS Grid : dynamic dependend min-width?

i have the following structure :

• root grid
  • grid1
  • grid2
  • grid3

I define the columns : repeat(5 1fr)

the problem is that because the content they have different widths. Is there a way somehow to pick the largest element width and set it as min-width to the other 2 grids.

Something like this /pseudo code/:

repeat(5 minmax(max(grid1.cells.width,grid2.cells.width,grid3.cells.width)), 1fr))

or in case i know which grid will be widest :

repeat(5 minmax(grid2.cells.width,  1fr))

this is very hacky non automatic solution:

 let min_width = window.getComputedStyle(grid2.children[0]).width
 grid1.style.gridTemplateColumns = `repeat(${grid1_ncols}, minmax(${min_width}, 1fr))`

a better one ??