I'm trying to create a semicircle as a container of a grid having a lot of elements.

.circle {
  /* this is for sqaures */
  display: grid;
  grid-template-columns: repeat(auto-fit, 25px);
  grid-template-rows: repeat(auto-fit, 25px);
  /* overflow: hidden; */
  height: 40vh;
  width: 80vh;
  background-color: white;
  margin: 0px auto;
  margin-top: 10vh;
  border-radius: 40vh 40vh 0px 0px;
}

.squares {
  border: 1px solid black;
}

image

But when the grid elements overflow the semicircle which is its container then they make a black line in the bottom. How to prevent it and make the grid continue in the vertical direction.

Also, I need the boxes to be square only and the width of the grid should be as it is but height may vary.