Skip to Content (Press Enter)
UserImage.jpg
Yizuhi Galaviz
40Views
2Comments
How could I create this kind of grid?
Question
Reactive
Front-end
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.

0
0
08 Feb 2021
Copy Link
2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

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

1
0
08 Feb 2021
Copy Link
2023-10-16 05-50-48
Shingo Lam

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

0
0
09 Feb 2021
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.