HTML & CSS 作业求助：用圆形元素制作指定方形图案

问题说明 #

需要制作的布局为：灰色容器内，左右两侧各垂直排列5个红色圆形，容器顶部中间水平排列3个红色圆形，底部中间水平排列3个红色圆形。当前代码因布局方式混用，无法正确摆放底部圆形，整体布局混乱。

解决方案 #

核心思路 #

放弃原代码中float与flex混用的方式，采用Grid布局精准控制每个圆形的位置，代码更简洁易维护。

修改后的代码 #

HTML代码

<div class="container">
  <!-- 左侧5个圆形 -->
  <div class="box left-1"></div>
  <div class="box left-2"></div>
  <div class="box left-3"></div>
  <div class="box left-4"></div>
  <div class="box left-5"></div>
  
  <!-- 右侧5个圆形 -->
  <div class="box right-1"></div>
  <div class="box right-2"></div>
  <div class="box right-3"></div>
  <div class="box right-4"></div>
  <div class="box right-5"></div>
  
  <!-- 顶部中间3个圆形 -->
  <div class="box top-1"></div>
  <div class="box top-2"></div>
  <div class="box top-3"></div>
  
  <!-- 底部中间3个圆形 -->
  <div class="box bottom-1"></div>
  <div class="box bottom-2"></div>
  <div class="box bottom-3"></div>
</div>

CSS代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 确保内边距不影响元素尺寸 */
}

.container {
  margin: 0 auto;
  height: 250px;
  width: 250px;
  background-color: grey;
  display: grid;
  /* 划分网格列：左侧列 + 中间3列 + 右侧列，每列50px（与圆形尺寸一致） */
  grid-template-columns: 50px repeat(3, 50px) 50px;
  /* 划分网格行：顶部行 + 中间5行 + 底部行，每行50px */
  grid-template-rows: 50px repeat(5, 50px) 50px;
}

.box {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 用50%实现圆形，适配不同尺寸 */
}

/* 左侧圆形定位 */
.left-1 { grid-area: 2 / 1; }
.left-2 { grid-area: 3 / 1; }
.left-3 { grid-area: 4 / 1; }
.left-4 { grid-area: 5 / 1; }
.left-5 { grid-area: 6 / 1; }

/* 右侧圆形定位 */
.right-1 { grid-area: 2 / 5; }
.right-2 { grid-area: 3 / 5; }
.right-3 { grid-area: 4 / 5; }
.right-4 { grid-area: 5 / 5; }
.right-5 { grid-area: 6 / 5; }

/* 顶部中间圆形定位 */
.top-1 { grid-area: 1 / 2; }
.top-2 { grid-area: 1 / 3; }
.top-3 { grid-area: 1 / 4; }

/* 底部中间圆形定位 */
.bottom-1 { grid-area: 7 / 2; }
.bottom-2 { grid-area: 7 / 3; }
.bottom-3 { grid-area: 7 / 4; }

关键调整点 #

1. Grid布局替代混合布局：通过网格划分，直接定位每个圆形的位置，避免float与flex混用导致的布局冲突。
2. 精准网格划分：网格行列尺寸与圆形尺寸一致，确保每个圆形刚好填满网格单元格。
3. 简化圆形样式：使用border-radius: 50%实现圆形，比固定数值更灵活。

内容的提问来源于stack exchange，提问作者Emir Bolat