Thumbnail grid problem: first thumbnail banner ✔️

index.html

<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>

style.scss

/* 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
	}
}

thumbnail-grid-problem-first-thumbnail-banner.markdown

Thumbnail grid problem: first thumbnail banner ✔️

A Pen by Acampbell on CodePen.

License.