I am using grid view to list a gallery , because some of the tile are much longer than others, so make the grid doesn't align to each other, (when the titles bellow them are longer, the thumbnails are higher than thumbnail with shorter titles bellow them).

Can anyone tell me how to solve this problem.

test site : http://www.architecture.name/architecture-grid

what I am trying to add staff into the table section of style.css, but I think i am probabley wrong for doing this. because once I change the table section, then all other table will be change as well.

How can I add a section only for this grid view ?



nevets’s picture

What I do is add this rule to style.css

table.view-grid td {
   vertical-align: top;

If you want to apply it to only this one grid view you can use

.view-architecture-grid  table.view-grid td {
   vertical-align: top;
mcfilms’s picture

@nevets --

I spent two hours yesterday on this CSS issue. I had some buttons I wanted to always lie at the bottom of a grid View. The text above would sometimes be one or three lines. I learned that CSS in a table is very difficult. You cannot position elements relative to the cell. However your tip led me to a solution.

For me, what worked was:

table.views-view-grid td {
   vertical-align: bottom;


A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

superxain’s picture

This works for my acquit_marina theme. thanks.

pbarnett’s picture

You might want to do a $view->gridcount = 3; in your template or in the view's argument handling code so the table doesn't overflow it's containing div.


Ole Martin’s picture

I have tried both methods but it did not help. Some other suggestions?
How did you solved it?

freelylw’s picture

I just use the code above

.view-architecture-grid table.view-grid td {
vertical-align: top;

It works fine for me.

Change 'architecture-grid' to the name of your views.

Ole Martin’s picture

Discovered that I use "horizontal" and not "vertical".
So then it was to use
"horizontal-align: top;"
It seems to work fine now. Have to study more later.

Ole Martin’s picture

Works in
ad blueprint - had to edit the css file
Interactive Media - had to edit the css file - is unstable - depending on the amount of the node. thumbernail destroys the height so that the grid is not align. Any way to fix this?
BlueTrip - with out edit css

Does not work in
Blue lake - I try to edit the css file

Someone else who has any results for this function?

virtualgirl’s picture

any suggestions, ? the sbaove style.css editing with horiz and vert in all manners in the theme shallow grunge and gettin no where but more eye burn. any suggestions are helpful thank you.
did paste the css style edit at the very bottom of the style sheet and maybe it goes in a different place ...

VM’s picture

placing it at the bottom of the style.css is fine. Are you using css aggregation? if so it must be turned off first in administer -> performance

virtualgirl’s picture

all are off, 'cept for the page compression is enabled , optimize css disabled, also thanks for the reply, still gettin the pictures in a list, "i know its just this one little thing...." (-that will take several hours to figure out)

Ole Martin’s picture

Have been away from this because of illness, but is now back to completing the project. The grid works fine but I get a different width of the columns, both at 2 and more columns, using "Blue Trip". In other different theme the heading and text will not be horizontal align, but centered i cells, and also here I get different width.
All installations are up-to-date.
Some good solution to the problem?