Exploring Tile Layouts with Bourbon Neat

Frequently in projects, I find it necessary to lay out a set of tiles (such as logos) on a “grid” system. Invariably different page designs have different requirements for layout:

  • 6 up
  • 5 up centered
  • 4 up but with space on each side
  • 3 up

To date, I haven’t come up with a system that I’ve been really happy with so I recently took some time to explore a possible implementation using Bourbon Neat.

I wasn’t completely successful as you can see in this Sassmeister gist.

When I’m using the actual grid (6 up and 3 up) then everything works out OK. However, when I use a subset of the grid (4 up and 5 up) then my gutters between the tiles are too wide (or the tiles themselves are too narrow).

This is definitely something that I will be pursuing further.