Grid in Appian

You can do it in two ways. 

1. Simple way - Just add all of it in the same grid and use the background color of the cells to create visual groups. You can then define the label of these colors in the legends below the grid. 
2. Add 4 grids adjacent to each other, with every row having the same height, and then you will be able to achieve this. (This adds a lot of configurations that you will manually have to adjust and control to ensure that the symmetry never breaks. 

Harshit Bumb (Appyzie) , If we go by 1st way, how to display the headers in the grid.

You can't display the header groups (eg. Team Member, Overall Competency). That is what we're using colors for. 

For displaying headers, you can simply use the 'label' property in a!gridColumn()

I would recommend use the 2nd way for your requirement as it would have better readability and understanding for the user. For the 1st Approach you need to have a separate legend on what color is for what as you cannot have both the header and the grid column labels. Only one can be accommodated.

I would recommend use the 2nd way for your requirement as it would have better readability and understanding for the user. For the 1st Approach you need to have a separate legend on what color is for what as you cannot have both the header and the grid column labels. Only one can be accommodated.