<div class="wrapper">
  <div class="letter">
    A
  </div>
  <div class="letter">
    B
  </div>
  <div class="letter">
    C
  </div>
  <div class="letter">
    D
  </div>
</div>

body,html {
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  background-color: black;
  min-height: 100vh;
}

.letter {
  background-color: #0069b3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 70px;
  color: white;
  line-height: 1;
  font-family: 'hobeaux-rococeaux-background', Helvetica;
  font-weight: 200;
  cursor: pointer;
  transition: all .3s ease;
}