Stacks4Stacks

The way UsefulGrid works is pretty straightforward. We start with a regular divisional container and nest 'items' within. Each item is then given a proportional width (specified in percentages). Based on how wide you set the items, a web browser then calculates how many items will fit on each row. It then tiles all the items from left to right and down the page. It's a very similar setup to what we use in stacks like Filter already, which is partly where the idea came from originally.

Within the stack settings you can specify things know as 'breakpoints'. These dictate to a web browser special style rules that need to be followed on different screen sizes. You can create up to five breakpoints in this stack, and adjust the width of grid items for each of the breakpoints. So for example on a small screen (like a smartphone) you could choose to use a width of 100% to output a single column of items; whereas on larger screens, reducing the item width lets you for more items on each row (and build a wider grid).

And that is about all there is to it! UsefulGrid is very simple in what it does, but solves common problems that other responsive layout stacks have been reluctant to go near. LightGrid uses pure CSS and HTML code, so there is no messy Javascript code to complicate things or drag page performance under. As a bonus, the UsefulGrid stack will print or save as a PDF as one single column of content.

Example

Here is an example of the UsefulGrid stack being used to build a simple image gallery. Resize your web browser window to see the responsive behaviour:
 

 
In this example, a set of 9 JPG images (each measuring 800px wide and 536px tall) were uploaded to a public folder, via FTP. They were pulled into each grid item using an HTML code stack and a normal HTML image tag. Each image was set as a link back to its original source. UsefulGrid works well with static images, video and many other content types.

UsefulGrid also features on the product page for Porthole, where it was used to construct a grid of responsive Porthole stacks. UsefulGrid has lots of possible uses, and is a useful stack element to have in your collection. Multiple UsefulGrid stacks can be used on the same page, if required.

Setup

Follow these instructions for getting a UsefulGrid stack setup in your page

• Once installed, drag and drop a UsefulGrid stack into your page
• In the stack settings on the right, adjust the Grid Items. Incrementing this setting will create a new item placeholder in your grid
• Drag and drop content or stacks into each grid item.
• If you need to, go ahead and change any of the breakpoint and corresponding width settings, in the UsefulGrid settings

Item sizing

Due to the way this stack was designed, its recommended that everything you add to the UsefulGrid stack is roughly the same size and shape, for best results. You can customise the item height using the provided height setting. Item height is calculated as a proportion to the item width. Overflowing content will be cropped to fit each item.

You could quite easily introduce margin (spacing) around each of the grid items, by using the normal margin controls in Stacks, applied to each stack you drag and drop into the UsefulGrid stack.

Width rounding

Some web browsers may round-up percentage widths. For example and item with a width of 50% may actually get rendered at fifty-point-something instead, and this can cause the grid layout to break. It's often dependent on the RapidWeaver theme being used and how good the CSS reset is. But this issue can occur for several other reason. If you encounter this same problem, simply try decrementing an item width slightly. Often this will fix problems.

Older versions of Internet Explorer do not support responsive behaviour, in the form of breakpoints. However this does not tend to prove to be a problem, as a majority of IE users tend to have their browser window open at the full screen resolution (often 1040px or more). So the lack of breakpoint support is of little issue. You can still change the width of items on Internet Explorer, using the provided IE Width setting (and in doing so your grid will still get rendered fine). Of course all newer web browsers have no difficult with responsive behaviour and suchlike.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.