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.
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.