title: Create a Grid List with Links
body: <p>I'm trying to make a grid of items that contain an image, a title, and a description. Each one the items in the grid needs to be a link (I want the list item to act as a link). The issue I'm having is making the entire list item a link, it seems to only work when there is a child element of the <code>&lt;a&gt;</code> (eg. if there is empty space in the <code>&lt;li&gt;</code> clicking in this space does nothing). In the demo the first item has no description and if you click below the title nothing happens.</p>
  
  <p><a href="http://jsfiddle.net/tojz8x5z/" rel="nofollow"><strong>Fiddle Demo</strong></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="grid-list"&gt;
      &lt;li&gt;
              &lt;a class="grid-list-content" href="#"&gt;
                  &lt;img class="grid-list-icon" src="https://www.wds-solutions.com/images/color_swatches.png" /&gt;
                  &lt;p class="grid-list-title"&gt;Title&lt;/p&gt;
                  &lt;p class="grid-list-description"&gt;&lt;/p&gt;
              &lt;/a&gt;
      &lt;/li&gt;
       &lt;li&gt;
          &lt;div class="grid-list-content"&gt;
              &lt;a href="#"&gt;
                  &lt;img class="grid-list-icon" src="https://www.wds-solutions.com/images/color_swatches.png" /&gt;
                  &lt;p class="grid-list-title"&gt;Title&lt;/p&gt;
                  &lt;p class="grid-list-description"&gt;Some Description. Bla bla bla bla bla bla bla bla bla bla bla&lt;/p&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul.grid-list li {
      display: inline-block;
      border: solid 1px black;
      width: 200px;
      vertical-align: top;
      padding: 5px;
      border-radius: 3px;
      overflow: hidden;
  }
  ul.grid-list li:hover {
      background-color: grey;
  }
  .grid-list-content {
      text-decoration: none;
      color: inherit;
  }
  .grid-list-icon {
      float: left;
      margin-right: 5px;
  }
  .grid-list-title {
      font-weight: bold;
      font-size: 14px;
      margin: 0px;
  }
  .grid-list-description {
      font-size: 10px;
      margin: 0px;
  }
  </code></pre>