You have surely seen the latest cool visualization of Google Trends, where the latest hot searches from Google Trends are shown in a colorful grid and where you can control the amount of items with a little grid control in the top left corner.

Regardless of the great swipe effect in the grid boxes, we really loved the idea of changing a layout dynamically with a control. Another great thing is that the boxes’ dimensions are percentage-based which makes them fluid. We couldn’t help but wonder how it would look if we’d added transitions to the grid where we could actually see what’s happening when changing from a let’s say 5 × 5 layout to a 2 × 3 one.

What we are doing is to calculate the positions and the dimensions of the boxes and set them according to the chosen grid layout. The values are percentage-based which makes the boxes fluid. Once we change the grid layout, a special class will be applied to the items that need to be hidden (i.e. the once we won’t see in the viewport anymore) which will optionally trigger a transition and do what you define in the class to be done (for example, scale them down or rotate them) and hide them.