Uneven grid distribution in People Page

[Sweetdevil144]

I noticed several non uniform grid distributions in the page peoples.js which rendered image cards mainly on the basis of provided URLs in contributors.js. Is there any way we can modify the grid distribution to reduce gaps and improve the UI ?
Following are some views I found odd for the UI :

[Sweetdevil144]

In the first image, Card on the left is rendered small, whereas the Card on the right occupies more spacing due to which an uneven gap is produced. Same goes to say for the second image also.

[Sweetdevil144]

If their is a grid layout being used somehow, then we can leverage CSS Grid Layout to provide a more uniform and flexible grid. This will allow us to handle cards of varying content sizes gracefully and ensure consistent gaps and alignments as shown below :

.peopleContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  align-items: start;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

With grid-template-columns, we're defining a responsive grid that adjusts the number of columns based on the card size and the available space. minmax(250px, 1fr) ensures that cards can scale between 250px and the fraction of available space, maintaining consistency across different screen sizes.

grid-gap provides consistent spacing between grid items, and align-items: start aligns grid items to the start of the grid area, which makes the top alignment consistent.

I would love to get your thoughts on this approach. If anyone has suggestions or improvements, please share!

[allgandalf]

Nice catch @Sweetdevil144 , can you come up with a PR for the same?

[Sweetdevil144]

Yeah sure! I'll create a PR for the same. If I face any problem then I'll surely contact you over here or on Slack discussion threads.

[allgandalf]

This PR #17 Tired to fix the issue of uneven grid distribution but i don't think they are working on it anymore as this is 1 year old, check it out if the changes suggested would help you.

Looking to see the pull request for the same soon !

[princyym]

We can also use card animation to improve the UI

[Sweetdevil144]

We can also use card animation to improve the UI

Yeah sure we can. But right now I'm trying to focus mainly on improving the grid view instead. If I find time I'll add some css animations too. I believe the following animation would suit perfect :

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
}

.card {
    background: #f3f3f3;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: scale(1.1); /* Enlarges the card to 110% of its original size */
}

[Sweetdevil144]

You can give it a shot to fix this issue if you want to try @princyym .

[princyym]

thanks, I will try my best @Sweetdevil144

[Sweetdevil144]

Any updates @princyym ? Did you try the approach I mentioned above? I mean, did it work? Else you can try using two rowed grid too.

[anmolchhabra21]

If this issue is still pending I can start working on it @princyym.

[Sweetdevil144]

Yeah sure @anmolchhabra21 . Go ahead. I've added additional Instructions above so make sure to give that a try too.

[allgandalf]

where are we with this issue @Sweetdevil144 ? any progress on the PR?

[Sweetdevil144]

I guess no progress from @princyym and @anmolchhabra21 since I handed the tasks to them with description. I'll come up with a PR for this myself.

[allgandalf]

sounds good, also we got selected for GSoC’24 as a organization, please checkout the listed ideas on our webpage @Sweetdevil144

[Sweetdevil144]

sounds good, also we got selected for GSoC’24 as a organization, please checkout the listed ideas on our webpage @Sweetdevil144

Sure @GandalfGwaihir. Thanks for suggestions. DMed you privately regarding the same.
Also, sems just finished. So i guess I'm free for a wild run now !! 😂

[Sweetdevil144]

@GandalfGwaihir Created a PR for the same!!