如何在网格布局中使div呈现为完整圆形？

问题根源 #

• 椭圆现象：.rating 仅设置了border-radius:50%，但未保证宽高比例1:1，加上margin-left挤压单元格空间，导致宽高失衡；
• 响应式变形：.box 固定25%宽度在小屏幕下过窄，rating-options 的grid布局没有适配不同屏幕的单元格尺寸。

修复步骤 #

1. 让评分按钮变成完美圆形 #

• 用aspect-ratio: 1 强制宽高比1:1，自动保持圆形；
• 替换margin-left为grid-gap控制按钮间距，避免挤压单元格；
• 用flex布局让数字居中显示，提升视觉效果。

2. 优化响应式适配 #

• 给.box添加min-width和max-width，限制极端屏幕下的容器尺寸，避免过窄或过宽；
• 让.rating随grid单元格自适应大小，保持布局一致性。

修改后的完整代码 #

:root{
    --dark-blue: hsl(213, 19%, 18%);
}
.box{
    background-color: var(--dark-blue);
    width: 25%;
    min-width: 280px;
    max-width: 400px;
    height: auto; /* 让高度随内容自适应，替代固定50% */
    margin: auto;
    border-radius: 1.5rem;
    font-weight: 700;
    padding: 1.5rem;
}
.rating-options{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem; /* 控制按钮间的间距 */
}
.rating{
    background-color:hsla(217, 12%, 63%, 0.123);
    border-radius: 50%;
    aspect-ratio: 1; /* 强制宽高相等 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* 增加文字颜色，提升可读性 */
    cursor: pointer;
    transition: background-color 0.2s ease;
}
/* 可选：悬停高亮效果 */
.rating:hover{
    background-color: hsla(217, 12%, 63%, 0.5);
}

<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>

兼容说明 #

如果需要兼容不支持aspect-ratio的旧版浏览器，可以用以下方式替代：

.rating{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.rating::before{
    content: attr(id);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

内容的提问来源于stack exchange，提问作者Afnan Ahmad