如何在网格布局中使div成为一个完整的圆？

Question

实际上我有三个div

(.box, .rating-options, .rating)

。我想创建一个这样的布局：

但是我没有得到完整的圆形，它们是椭圆形的。父元素的宽度是固定的（即 25%），因此为了获得完整的圆，我必须调整

.rating-options

的高度，但是当它响应时，它也会变形。

:root{
    --dark-blue: hsl(213, 19%, 18%);
}
.box{
    background-color: var(--dark-blue);
    width: 25%;
    height: 50%;
    margin: auto;
    border-radius: 1.5rem;
    font-weight: 700;
    padding: 1rem;
}
.rating-options{
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(5, 1fr);
}
.rating{
    background-color:hsla(217, 12%, 63%, 0.123);
    margin-left: 1rem;
    border-radius: 50%;
}

<div class="box">
    <div class="rating-options">
      <div id="1" class="rating">1</div>
      <div id="2" class="rating">2</div>
      <div id="3" class="rating">3</div>
      <div id="4" class="rating">4</div>
      <div id="5" class="rating">5</div>
    </div>
  </div>

请帮我解决这个问题。

Answer 1

:root{
    --dark-blue: hsl(213, 19%, 18%);
}
.box{
    background-color: var(--dark-blue);
    width: 25%;
    height: 50%;
    margin: auto;
    border-radius: 1.5rem;
    font-weight: 700;
    padding: 1rem;
}
.rating-options{
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(5, 1fr);
}
.rating{
    text-align:center;
    background-color:hsla(217, 12%, 63%, 0.123);
    margin: auto;
    border-radius: 50%;
    width:20px;
    height:20px;


}

<div class="box">
    <div class="rating-options">
      <div id="1" class="rating">1</div>
      <div id="2" class="rating">2</div>
      <div id="3" class="rating">3</div>
      <div id="4" class="rating">4</div>
      <div id="5" class="rating">5</div>
    </div>
  </div>

Answer 2

这会让你更接近你想要的，但我在容器上设置了一个最小宽度，因为无论你做什么它最终都会变形，所以我会重新考虑

width: 25%

- 至少通过适用于较小屏幕的媒体查询。

:root{
    --dark-blue: hsl(213, 19%, 18%);
}
.box{
    background-color: var(--dark-blue);
    width: 25%;
    height: 50%;
    margin: auto;
    border-radius: 1.5rem;
    font-weight: 700;
    padding: 1rem;
    min-width: 300px;
}
.rating-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
.rating-options div {
    background-color:hsla(217, 12%, 63%, 0.123);
    border-radius: 50%;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    color: white;
}

<div class="box">
  <div class="rating-options">
    <div id="1">1</div>
    <div id="2">2</div>
    <div id="3">3</div>
    <div id="4">4</div>
    <div id="5">5</div>
  </div>
</div>