<section class='post__content'>
<p>Problem: we have a grid of fixed size thumbnails. For a nicer look, we want this grid to be middle aligned with respect to the paragraphs above and below, and, at the same time, we want the last grid row to be left-aligned with respect to the grid.</p>
<div class='grid--thumbs'>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_21.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_10.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_31.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_32.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_25.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_20.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_27.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_11.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_9.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_2.jpg'/>
</a>
<a href='#'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_05_a_amur_leopard_34.jpg'/>
</a>
</div>
<p>❌ This demo serves the sole purpose of illustrating why the <code>inline-block</code> approach is a bad one for this problem: the last grid row is not left aligned with respect to the parent grid, but middle aligned. You probably don't want to copy and use this CSS in your own projects. ❌</p>
</section>
/* relevant styles */
.grid--thumbs {
text-align: center;
a { display: inline-block }
}
/* prettifying styles */
* { margin: 0 }
.post__content {
margin: 0 auto;
padding: .5em;
max-width: 57em;
background: gainsboro;
font: 1em/ 1.375em trebuchet ms, sans-serif;
> * + * { margin-top: 1em }
code {
font-size: 1em;
font-family: ubuntu mono, consolas, monaco, monospace
}
}
.grid--thumbs {
img {
display: block;
width: 8em;
box-shadow: 0 0 0 1px #000
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.