The Grid Stack


A customer recently asked me to add twenty logos to a web page. I suggested a slideshow but he wanted a grid. After trying half a dozen grid stacks from different developers, I discovered that none of them did what I envisaged when the page reflowed on a mobile device. The images were either no longer centred, or they were of differing sizes. I ended up nesting stacks to solve the problem.

On the RapidWeaver forum yesterday, someone had the exact same problem and who should answer but Tommy with “I just built a stack to solve your problem”. The guy with the problem solved it the same way that I did, but I grabbed The Grid, because I know I’ll have the same problem again one day.

The Grid from DeFliGra incorporates a second stack ‘The Grid Box’ and I admit to asking Tommy what it was for. It wasn’t immediately apparent and the DeFliGra page is very new.

If you drop The Grid onto a Stacks page, it works fine on its own. Set the number of boxes, drop in your content and you’re off, albeit images that are larger than the predefined 200px are cropped, which is fine – you have a number of choices to solve the problem:

  • You may redefine the box size
  • You may set the overflow to ‘visible’
  • You may activate ‘image processing’

The Grid has numerous HUD options and it is one of those stacks where it pays to study the options. After setting the number of boxes required, we can set a transition time. Which is rather strange because while it is fun to watch the boxes shuffle around the page in slowmo after changing the browser width, that is not the everyday requirement – I’m either going to view the page on a PC or a mobile device.

Next up, we have background colours, borders and border styles – all straightforward settings.
Then we have the Max Width, which is the maximum width that The Grid is allowed to grow to. Below this, ‘Kind of Width’ sets the width for the boxes themselves to max or minimum – the size is set in pixels.

The same applies, then for the box height. You’ll need to set the vertical alignment for The Grid itself along with the alignment for the last row – at some point you will have images that can’t align themselves within the grid e.g. you have twenty images but your browser can only display three alongside each other. You will have two ‘orphaned’ images, as they say in typography. These can be aligned left, right or centred – the first stack I’ve registered that can do this, but I’m sure that someone will inform me otherwise.

‘Image Processing’ activates responsive images within The Grid. Please observe that neither IE, nor Firefox will process a max-width setting for images.

The Grid Box is a helper stack – It will take up the full height of a grid-cell – allowing you to style individual grid-cells. There’s also an option to adjust the height of The Grid Box so that text may be positioned above or below an image without the text moving around depending on the size of the image.

The Grid can be nested so that you have a grid within the grid. The nest remains responsive on all screen sizes.

The Grid is one of the best grid stacks that I’ve encountered to date, it solves alignment problems that I’ve been confronted with before.

Marten Claridge

Founder of RapidWeaver Central, Developer of WeaverThings, Author of Books, Marten's highly unique skillset has established him as a leading RapidWeaver, Web Design and Wordpress consultant with a worldwide client-list and highly dysfunctional sense of modesty.