16
Views
2
Comments
How could I create this kind of grid?
Application Type
Reactive

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.

mvp_badge
MVP
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.

Regards,

Daniel

Rank: #486

Hi,

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