In some cases, a Gallery Box is not the best solution for displaying several images together, including longer captions that aren't possible in the Image Gallery. To display images in a grid, two images wide, please use this coding for responsive display.
Begin by watching a short video tutorial that provides instructions for adding an image grid to a LibGuide. This video is 06:00 in length.
Images and captions should still use the
<figcaption> coding with a couple of exceptions:
Each individual image and caption combination should be coded this way.
The framing coding to create the responsive grid using <div> tags to create the rows and columns of the grid. Each row is coded like this:
To add another row to the grid, you would just repeat this coding.
Here is an example of the complete coding to produce the grid above:
For the grid to have three rows across, the structural coding looks like this:
For the grid to have four rows across, the structural coding looks like this: