Adaptive grid equal heights not working - any ideas?

I have tried to use Adaptive grid for a couple of projects and having the same issue with all of them.

I need the cells to be equal heights, however they are not… There is a setting in Adaptive grid for this but it does nothing in these projects.

Is it a theme related issue?

TIA

Using Clearing theme.

AdaptiveGrid by Stacks4Stacks: AdaptiveGrid | Stacks4Stacks

Equal heights will only work on the grid cells themselves, NOT the stacks you put inside the cells. We cannot see what you put inside each cell. Additionally we have zero control over the content you place within each cell – and it would be mighty foolish to attempt any manipulation of heights on stacks developed by someone else (it would likely cause a lot of breakage).

If you turn-on background or border fills in the settings, everything should work fine for you:

Each row of cells will gain a fixed height (in pixels) and all will equal the height of the tallest cell within that horizontal row. If the page is resized or changes orientation, the calculations are repeated. Same if the screen is made narrower and cells reflow onto new rows.

Stacks dropped inside the cells will safely retain an ‘auto’ height and are never changed.

AdaptiveGrid does not have options for shadow effects built-in. Right now for box shadow effects, your easiest option is to give each cell a custom class of something like ‘cellShadow’ and then write some simple custom CSS code to apply a box shadow and some extra margin:

.cellShadow {
   box-shadow: 0px 0px 5px 6px #ccc;
   margin: 15px;
}

The cell width settings may require a slight adjustment, to compensate for the new margin. End result would look like this:

If you find the above useful and you decide to use AdaptiveGrid in your project, please don’t forget to make a small contribution to support ongoing development and updates.

4 Likes

Thank you for your reply and help Will,

I can see what you are saying about Adaptive grid not being able to control other stacks. This must be why the Gogrid stack has it’s own elements to use for alignment.

I have tried what you mentioned above, however, this leaves a ‘margin’ around the stacks added to each cell. I have tried using 0 as the margin, turning the margin off and tried without the shadow: it seems the cell adds a small margin regardless.

I may have to rethink this as the alignment within the cells is more complex than I thought for images and text of varying heights.

When I think about it now it seems I wanted conditional alignment. I may get around it with an align to the bottom, assuming it can get the size from adaptive grid.

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.