Created
July 19, 2021 04:20
-
-
Save doc22940/f23cd3ed1e56159460172c2668022740 to your computer and use it in GitHub Desktop.
Thumbnail grid problem: first thumbnail banner ✔️
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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://images.unsplash.com/photo-1542826438-bd32f43d626f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1589846939165-bcdd27f2089a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1565071559227-20ab25b7685e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1589091637765-cbd0eff73a44?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1589655192432-53a08335e80b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1563118030-04bf9d7c5084?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1588484588657-0bbbee05132f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1579306194872-64d3b7bac4c2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1570203984609-ef7c71646011?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1577859369205-6de8f02d8335?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
<a href='#'> | |
<img src='https://images.unsplash.com/photo-1573900811262-be55787e4552?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ'/> | |
</a> | |
</div> | |
<p>✔️ This demo shows how we can use the <code>min()</code> function to prevent a grid column from becoming wider than the actual grid. ✔️</p> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* relevant styles */ | |
.grid--thumbs { | |
display: grid; | |
grid-gap: .25em; | |
grid-template-columns: repeat(auto-fit, minmax(Min(8em, 100%), 1fr)); | |
grid-auto-flow: row; | |
a:first-child { | |
grid-column: 1/ -1; | |
img { height: 13em } | |
} | |
} | |
/* 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: 100%; height: 6.5em; | |
box-shadow: 0 0 0 1px #000; | |
object-fit: cover | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment