Photo gallery layout
First, I will start with the good:

&lt;figure&gt;
    &lt;img src="photo1.jpg" /&gt;
    &lt;figcaption&gt;Photo 1&lt;/figcaption&gt;
&lt;/figure&gt;


It is excellent that you use the HTML5 tag figure instead of a plain old div.

You may just have removed this for brevity (many people do), but when you write HTML, you should build your page like this:

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Your Title Here&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="gallery"&gt;
        &lt;figure&gt;
            &lt;img src="photo1.jpg" /&gt;
            &lt;figcaption&gt;Photo 1&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;figure&gt;
            &lt;img src="photo2.jpg" /&gt;
            &lt;figcaption&gt;Photo 2&lt;/figcaption&gt;
        &lt;/figure&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


You can validate your HTML at the W3C validator (it validates once you provide the framework).

It does look clumsy the way you write out each figure.  If I were you, I would probably load the images and figcaptions in a separate file (maybe a JSON file?) and use JS to add them to the page.  This way, you just have to enter the new data in this file, and the webpage will load them right in the next it is loaded.