SCSS

by Chris

HTML

<div class="page">
  <div class="page-inner-wrapper">
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
    <div class="image-container">
      <img src="https://source.unsplash.com/collection/190727/" alt="">
    </div>
  </div>
</div>

SCSS

/* Settings */
:root {
	--pageMargins: 10mm;
			--spacing: 10px;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}


body {
	margin: 0;
	position: relative;
}

img {
		width: 100%;
		height: 100%;
		max-width: 100%;
		object-fit: cover;
		object-position: center;
	}

.page {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 297mm;
	height: 210mm;
	padding: var(--pageMargins);
	overflow: hidden;
	
	@media only screen {
		box-shadow: 0 0 8px 0px rgba(0,0,0,.1);
	}
	
	&-inner-wrapper {
		display: grid;
		grid-gap: var(--spacing); 
		grid-template-columns: repeat(4, minmax(calc(25% - var(--spacing)), 25%));
		grid-template-rows: repeat(2, minmax(calc(50% - var(--spacing)), 50%));
		width: 100%;
		height: 100%;
	}
}

.image-container {
	overflow: hidden;
}