CSS сетка переполняет родительский круг.Как заставить сетку CSS соответствовать?

Question

поэтому у нас есть блок div и мы применили некоторый радиус границы, чтобы сделать его окружностью.

Затем мы определили сетку css внутри этого блока div.Но эта сетка CSS не содержит себя внутри круга.

Проблема в том, что эта сетка все еще видит блок div в виде прямоугольной блочной модели.Блок Div рендерится только как круг, но он все еще представляет собой блочную модель глубоко внутри.

есть идеи, как содержать сетку css только внутри круга?

Я не хочу скрывать переполнение.Я хочу, чтобы сетка уважала границу и оставалась внутри.

HTML-код:

<div> </div>

Код CSS:

div{
  height: 25vh;
  width: 25vh;
  border-radius: 50%;
  border: 2px solid black;
  background-color: black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr:
}

Answer 1

Не видя ваш код, трудно диагностировать проблему, но это звучит как добавление переполнения: скрытый в вашем круге div может помочь:

.circle {
    border-radius: 50%;
    overflow: hidden;
}

См. Эту скрипку для демонстрации: https://jsfiddle.net/sqgkc962/