<main>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</main>

main {
  display: flex;
  height: 100vh;
}
div {
  width: calc(100%/3);
}
div:first-child {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 5px, transparent 5px),
    radial-gradient(circle, #BBB 5px, transparent 5px),
    radial-gradient(circle, #BBB 5px, transparent 5px);
  background-position: 0 0, 1px 1px, 2px 2px;
    background-repeat: repeat;
    background-size: 30px 30px;
}
div:nth-child(2) {
    background: radial-gradient(circle, #FFF 4px, transparent 4px), radial-gradient(circle, #BBB 5px, transparent 5px);
    background-repeat: repeat;
    background-size: 30px 30px, 30px 30px;
}
div:last-child {
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 5px, transparent 5px),
    radial-gradient(circle, #BBB 5px, transparent 5px),
    radial-gradient(circle, #BBB 5px, transparent 5px);
  background-position: 0 0, -1px -1px, -2px -2px;
    background-repeat: repeat;
    background-size: 30px 30px;
}