Circle div bounding CSS grid

HTML

<div class="circle">
    <div class="grid">
      <div class="item a">A</div>
      <div class="item b">B</div>
      <div class="item c">C</div>
      <div class="item d">D</div>
    </div>
</div>

CSS

.circle {
  margin: 40px auto;
  padding: 20px;
  border-radius: 50%;
  background: #ccc;
  width: 160px;
  overflow: hidden;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 160px;
  grid-gap: 10px;
  color: #444;
  margin: 0 auto;
}

.item {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  text-align: center;
}