Material Design: list items or cards to display a large collection of elements?

I am developing a web application targeting desktop using Material Design and I am now facing a dilemma.

The layout of the application is rather standard: toolbar on top, left sidebar and large content area. something like this (it's the layout of the starter app for Angular Material):

In the content area I have now to display a (possibly) large set of elements, which represent "customers".

I'm considering mainly 2 possibilities:

1. 
   

   Using a traditional list, where each element fills the entire width and for each element I show a pic of the client, the client name in one row and some extra details in the second row. This is probably the most traditional approach, however I don't like it very much because it wastes a lot of space on large screens.

   
   


2. 
   

   Using a grid" of cards, where for each customer I have a card, showing the same info as above but in a more space efficient way.

   
   

What do you think? Any suggestions?

Answer

I think this is a valid design question! I agree the list takes up too much space and on tablets can look unnecessarily elongated. This is one of many reasons card designs are increasingly popular across both websites and mobile applications. Card design lends to a clean and attractive user interface. Card design will also display the information appropriately to the device screen. On a mobile it may be a two-up card design but on tablet it may be three or more per row.

For further reading check out this article.