Grid is an ultra-simple but deceptively powerful stack that allows you to arrange up to four equal columns in a neat grid that re-jig themselves responsively down to three, two and one column depending on the device your visitor is using. The stack comes pre-configured to re-arrange columns at widths of 1024, 768 and 480, but you can change each of these individual break points to suit yourself. Similarly, you can define how many columns are displayed at the four key layout widths — desktop, iPad landscape, iPad portrait and iPhone — to suit your content.
Like Reflow, Grid’s settings are condensed into only a few simple options which means there’s almost no scrolling required, even on a smallish MacBook screen. You get control over the horizontal and vertical gutters between items but what we really like is the ability to equalise the height of each grid item — either by row so that everything in the row is the same height, or globally, so that every item in the grid is the same height. This setting automatically adds a background and border to your items, making it easy to create neat, equal height panels that may contain content that has a different height. Alternatively, with this option disabled you can specify that the content in each grid item aligns to the top, middle or bottom, thus giving you plenty of ways to arrange your content in a neat and tidy fashion.
There are other grid stacks that give you much finer control over the placement, width, margin and padding but they take more time and effort to deploy. Grid’s strength is in its excellent balance of style and simplicity and the way it allows you to create an attractive grid layout – for a portfolio, shop, catalogue and so on – with the absolute minimum of effort.