How do I repeat different kind of rows with different widths with css grid?

I want to utilize css grid to display the following table using repeat(x) pattern:

• The blue boxes are the headings and only appear once. They should use auto width, based on the biggest blue/green box in the column.
• The green boxes also use auto width, based on the biggest blue/green box in the column.
• They yellow boxes take 100% width combining the width of all 3 columns.

The green + yellow boxes should be able to be repeated X number of times.

If this is not a good example to use grid, feel free to show a different alternative!