Struggling to create a grid layout with images, titles, and descriptions that are all clickable links? The challenge is in making the entire list item act as a link, rather than just specific elements within it. Take a look at the demo below, where clicking on empty space within a list item may yield no action.
Check out the Fiddle Demo here
HTML Code Snippet:
<ul class="grid-list">
<li>
<a class="grid-list-content" href="#">
<img class="grid-list-icon" src="https://www.wds-solutions.com/images/color_swatches.png" />
<p class="grid-list-title">Title</p>
<p class="grid-list-description"></p>
</a>
</li>
<li>
<div class="grid-list-content">
<a href="#">
<img class="grid-list-icon" src="https://www.wds-solutions.com/images/color_swatches.png" />
<p class="grid-list-title">Title</p>
<p class="grid-list-description">Some Description. Bla bla bla bla bla bla bla bla bla bla bla bla</p>
</a>
</div>
</li>
</ul>
CSS Styling:
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;
}