<div class="grid">
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="four"></div>
</div>

.one {
	background:
  radial-gradient(circle, transparent 0%, crimson 20%, crimson 80%, transparent 80%, transparent),
  radial-gradient(circle, transparent 40%, crimson 20%, crimson 80%, transparent 80%, transparent) 50px 50px,
  linear-gradient(white 8px, transparent 8px) 0 -4px,
  linear-gradient(90deg, white 8px, transparent 8px) -4px 0;
background-color: crimson;
background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}
.two {
	background:
  radial-gradient(circle, transparent 10%, blue 20%,
    blue 40%, transparent 40%, transparent),
  radial-gradient(circle, transparent 0%, blue 0%,
    blue 40%, transparent 40%, transparent) 25px 25px,
  linear-gradient(#6666ff 4px, transparent 4px) 0 -2px,
  linear-gradient(90deg, #6666ff 4px, transparent 4px) -2px 0;
background-color: blue;
background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}
.three {
background-color: #f4d4aa;
background-image: linear-gradient(90deg, transparent 50%,
  #e9a74f 50%),
	linear-gradient(10deg, #3F2B96 0%, #A8C0FF 100%);
background-size: 18px 25px;
}
.four {
	background:
  linear-gradient(135deg, green 12.5%, transparent 12.5%) -25px 0,
  linear-gradient(225deg, green 12.5%, transparent 12.5%) -25px 0,
  linear-gradient(315deg, green 12.5%, transparent 12.5%),
  linear-gradient(45deg, green 12.5%, transparent 12.5%);
background-size: 50px 20px;
background-color: hotpink;
}

.grid {
	display: grid;
	grid: 50% 50% / 50% 50%;
	gap: 2px;
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
}
.grid > * {
	border: 1px solid darkslategrey;
}

* {box-sizing: border-box;}
body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: #fff;
}

// https://cssgradient.io/blog/gradient-patterns/
// I've just changed measurements and colours