Time for action – creating a masonry layout

Perform the following steps to create a tiled layout:

1. We'll get started by creating a basic HTML document and the associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, we'll set up a container with a series of repeating elements inside. We'll use a list (<ul>) as the container and individual list items (<li>) inside for the repeating elements. Inside each list item, we'll place an image and some text that describes that image, as follows:

   <div class="content">
     <h1>Cats of the World</h1>
   </div>
   
   <ul class="container">
   
     <li class="cat">
       <figure>
         <img src="images/siamese.jpg">
         <figcaption>
           <h2>Siamese</h2>
         </figcaption>
       </figure>
       <div class="info">
         <div class="traits">
           <dl>
             <dt>Country</dt>
             &lt...