How could I create this kind of grid?
Application Type

Hi there.

I'm designing of my app's screens, and I have a grid-kind-of list in it. Right now it looks like this:

Which I think looks kinda disgusting. Those cards are usually not going to be the same size, but I wish the space between them would "adapt" to their size. Like in Google Keep? The cards representing notes are never the same size, yet the space between them is always the same and it doesn't look ugly.

I really hope I'm making sense...

Is there any way I can achieve my desired results?

Thanks in advance.

Rank: #17

Hi Yihuzi,

Why not adapt to one height for all panels, and limit the number of rows of data you show, so if there is more data than fits to show something like .... or a link to expand to see more information.

That would be the easiest to implement a better appealing grid.



Rank: #486


Css can handle that by something like:

  1. create a big container for each row
  2. for each row, add your 3 containers into the big one
  3. add css for your 3 containers to get the full height of parent

Hope this help