Result

画像の上に要素を重ねてdisplay:grid;でグリッドと枠線を作り中を空にすればタイル画のようなものが作れます
枠線はすき間をgrid-gapで作り、background: white;で白い枠線を表現します。
その際、画像部分に影響が出るので子要素にbackgroundを設定し、mix-blend-mode:lighten;で画像が表示されるようになっています。
設定適当なのでモニタサイズ次第ではズレると思います。親の高さを決める等、便宜調整下さい

css

section article {/*タイル作成*/
  position: absolute;
  top: 0;
  width: 100%;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  mix-blend-mode: lighten;
}

section div {/*格子を作り背景を設定、親のmix-blend-modeで画像を表示させる*/
  background: black;
  height: 25.3vw;
}

section div:nth-of-type(2) {/*グリッドは自由に*/
  grid-column: 2 / 4;
}

html

<section>
	<img src="https://picsum.photos/1600/1100">
	<article>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</article>
</section>

can i use

via

Image Mosaic Effect with CSS Grids & Blend Modes