JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<div class="wrapper">
	<div class="scattered-grid">
		<div class="block" id="block-1">
      <img src="http://placehold.it/200x200/&text=1" alt="">
    </div>
		<div class="block" id="block-2">
      <img src="http://placehold.it/200x200/&text=2" alt="">
    </div>
		<div class="block" id="block-3">
      <img src="http://placehold.it/200x200/&text=3" alt="">
    </div>
		<div class="block" id="block-4">
      <img src="http://placehold.it/200x200/&text=4" alt="">
    </div>
		<div class="block" id="block-5">
      <img src="http://placehold.it/200x200/&text=5" alt="">
    </div>
	</div>
</div>

SCSS

.scattered-grid {
	outline: 1px dotted pink;
	display: grid;
	height: 400px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	.block {
		outline: 1px dotted orange;
		img {
			display: block;
			width: 100%;
		}
		&#block-1,
		&#block-5 {align-self: end}
		&#block-2,
		&#block-4 {align-self: center}
	}
}