Skip Navigation

[Resolved] Grid spacing not consistent

This thread is resolved. Here is a description of the problem and solution.

Problem: Each cell in my table View is not the same height, so the contents look inconsistent.

Solution: Table designs are very closely tied to the content being displayed in the cell. This can lead to inconsistent heights when the contents for each cell are different. For a more consistent height, use the Bootstrap Card-Group design. This implements the flexbox design model, which can help make heights more consistent.

Relevant Documentation:
https://getbootstrap.com/docs/4.4/components/card/#card-groups

This support ticket is created 4 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Tagged: 

This topic contains 3 replies, has 2 voices.

Last updated by richardB-17 4 years, 11 months ago.

Assisted by: Christian Cox.

Author
Posts
#1516233
grid.jpg

I want to increase the spacing between the gridded tiles. I created a class and wrapped all the fields in a class called circle-tile and added 50px margin which exaggerates the problem. The problem is even slightly visible before I even add the margin.

I have attached an image to explain the issue.

hidden link

#1516725

Hello, I will be glad to take a closer look. I need to see this in the browser to make a good recommendation, but it looks like the site is in Maintenance Mode. Can you provide a login so I can see the contents? Private reply fields are enabled here.

#1518887

Okay it looks like you've chosen a table-based design for this View's loop. Table designs are very closely tied to the contents of each cell, which can lead to inconsistencies like this. If you'd like to see something more consistent from grid cell to grid cell, I'd recommend using Bootstrap cards, which implement the flex box display. This can be helpful if you want to make the heights of each tile consistent, regardless of the contents of each tile. Here's an example using card-groups in the Bootstrap documentation:
https://getbootstrap.com/docs/4.4/components/card/#card-groups

Let me know if you have questions about implementing this design style using your own markup, or if you need more examples.

#1526995

My issue is resolved now. Thank you!