Dynamic Multi Grid Navigation

By: on Oct 28, 2021

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.

> Result

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

The navigation boxes are 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.

Conclusion

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