GalleryGrid.js Demo

This is a demo of the grid layout inside a responsive Bootstrap container. The grid markup itself is just a <ul> with multiple <li class="picture"> items that contain <img src="..." data-width="..." data-height="..."> tags with the actual images. Resize the browser window to see how the grid automatically updates when the size of the container changes, and play around with the available settings and methods in the control panel below. For more information check the description on the GitHub page.

API Playground

Options

px
The desired height of a row of images in the layout.
px
The minimum width of the container at which the layout will be applied. Useful to apply a responsive alternative layout (e.g. pure CSS) to extremely small screen sizes.
Automatic layout update when the window size changes.

Methods