View with Grid Format

Request Type: 
General Assistance
Forums: 
Content Types and Views
Author: 
Devin Maloney
Issue/Request: 

Hi,

I just created a view with a grid format on the SCG Team page. The grid is set up to have four columns. When I add 1-3 pieces of content to the view the view does not display properly. The content seems to stretch to fill the space. I intended to have four student photos/names display per row. However, in rows that are not completely filled, I would still like the content to appear the same size. Please let me know how I should resolve this issue.

Thanks

-Devin Maloney

Chao Hang Lu on August 27, 2018:

Hi Devin,

Can you be more specify on the issue? I’m not spotting the issue.

Devin Maloney on August 27, 2018:

Hi Chao Hang,

Alyssa has been helping me fix a default image issue on the page. I just uploaded the photos so you can see what is going on. I set up a four column grid on the page. I want the grid to be set up in such a way that is only two individuals are listed in a specific category they fill the first two columns rather than filling the entire space as it is doing now.

Thanks

-Devin

Devin Maloney on September 4, 2018:

Hi Chao Hang,

I was wondering if you have found a solution to my grid problem. I am need to finish the site and get approvals by September 18th.

Thanks

-Devin Maloney

Devin Maloney on September 7, 2018:

Hi,

I was just reaching out again to see if anyone has had the chance to address this issue. I need to turn over the site for reviews and then the client shortly thereafter so they can add their content before the campaign starts.

Thanks

-Devin Maloney

Chao Hang Lu on September 10, 2018:

Hi Devin,

I fixed the column width. Please check again.

Devin Maloney on September 10, 2018:

Hi Chao Hang,

Thanks for looking at the issue. The images are now the correct size. The only issue is that the images aren’t aligning correctly in the columns. If there are only two students in the each view they are showing in columns 1 & 3 rather than columns 1 & 2. Is there any way to fix this?

Thanks

-Devin

Chao Hang Lu on September 10, 2018:

Hi Devin,

Table isn’t really for layouts. If you like to correctly set up you’re required to rebuild layout with different view format instead using grid.  This required custom CSS coding.

Devin Maloney on September 10, 2018:

Hi Chao Hang,

Thanks for letting me know. I was initially modeling the page after the member directory on the Architecture Dean’s council website which uses a grid format (ysadc.yale.edu - CAS login required). Is this something that you could advise me how to resolve? I am working on a very tight timeline.

Thanks

-Devin

Chao Hang Lu on September 10, 2018:

Hi Devin,

I helped you change the width of the column cell width to be auto. This way the column will automatic stretch out if needed but again table isn’t a perfect way for layouts. This is a quick fix but not a permanent solution.

Devin Maloney on September 10, 2018:

Hi Chao Hang,

Thanks for looking at this again. I am relatively new to Drupal so what view format should I use, rather than the grid, when rebuilding the view?

Thanks

-Devin

Chao Hang Lu on September 10, 2018:

You can use unformatted list and then use CSS to control the layout. You may use such as Flexbox, display inline block or float method to display the layout you like.