Regarding the header/button area; as far as I know you can hide the controlbar/paging buttons + search in the datagrid properties. Same applies to the list view, by not setting search attributes.
Regarding the image/spacing problem. I would suggest a listview with the following classes; listview-stylingless lv-col-md-2
The first class removes all preset styling on a list view -> removing a lot space. The second class converts the vertical oriented listview in a horizontal view. the number defines the size of the columns. where 12 is one column, 4 results in 3 columns, 2 in 6 columns. -> this is based on the bootstrap grid. which exists out of 12 columns. the size per column defines the number of columns. So play around with that number to find the best horizontal spacing.
Also, I'd like to display the colored boxes closer to one another (horizontally/ vertically), so ideas on that are welcome as well!
In general, context wise: the modules can belong to clusters, and in this list I want to somehow make clear to which cluster(s) they belong. I thought of the coloured boxes, but if there is a better and/ or easier way, I'd like to hear that! (Possibly circumventing all of the above mentioned problems. ;))
Try never to answer your own question but edit your original question. Images in template grids can be tricky. Luckily there is an app you can use: https://appstore.home.mendix.com/link/app/346/FlowFabric-BV/Enum-Toggle
You would need to put the images in an enumeration though but it made solve your problem. Otherwise you would need datasource microflows to retrieve every image and that is not so efficient.
And may be you can elaborate what the screen layout you would like to achieve because from the current screenshot it is not inmediately obvious.