Question: There is one grid-view in our web application. But as you can see, group and category are eating up the space.
[![enter image description here](https://i.stack.imgur.com/igMwB.png)](https://i.stack.imgur.com/igMwB.png)
Is there any better ideas for such layouts?
Even if there is total change in the layout, that will be fine.
I tried to search for better alternatives but I couldn't find.

Answer: 
I think you should also try a card layout. For example: 

[![Card layout example](https://i.stack.imgur.com/a7nIY.png)](https://i.stack.imgur.com/a7nIY.png)

This layout provides multiple benefits:

* **Aids quick scanning**
	+ Cards are easier to scan compared to tables.
* **Easily adapt to small screens**
	+ Cards will work better on mobile/smaller devices in this case compared to tables, as they can be organized to scroll in a single column.
* **Edit/delete buttons are positioned close to the items they modify**
	+ In the original version, you'd notice that the edit/trash icons are a bit ambiguous. It is not clear what the icons will edit or remove. In general, [actions/buttons should be close to the things they act on](https://www.nngroup.com/articles/closeness-of-actions-and-objects-gui/).
* **Removes Icon cluster**
	+ You don't have to show the icons in multiple rows. Using cards, icons can be shown (or emphasized) on hover and directly where they are needed.
You may try a tree hierachy style organization. Something like this :

![mockup](https://i.stack.imgur.com/CKN26.png)

[download bmml source](/plugins/mockups/download?image=http%3a%2f%2fi.stack.imgur.com%2fCKN26.png) – Wireframes created with [Balsamiq Mockups](http://www.balsamiq.com/products/mockups)