I was intrigued by the multi grid option that Unsplash has for users to view the photographs. It is a minimal user friendly way to give a dynamic grid viewing option.

With some simple CSS and jQuery I was able to reproduce this feature.


See the Pen Dynamic Multi Grid Navigation by Jeremy Faucher (@jeremyfaucher) on CodePen.

I used a Boostrap style of grid for this example the utilizes the CSS float property.

The navigation boxes ia a fun CSS trick that just uses a div for each box with a black background and padding.

The jQuery is using the on click function with add and remove classes to toggle the grid.


Sometime the simplest solution work the best. Custom CSS, no icons and yes I did give in to jQuery.