CSS网格布局

效果图

---

思路分析

使用样式描边画出五个圈，再将整体想象成一个6*3的表格后，使用表格布局调整五环的位置，如下图所示。

---

代码

  display: grid; // 设置为表格布局

  grid-template-columns: repeat(6, 1fr); // 定义了6列 每一列1等份

  grid-template-rows: repeat(3, 1fr); // 定义了3行 每一行1等份

  grid-column:1 / 3; // 从列的第一根线到第三根线

<div class="container">
  <div class="item1" />
  <div class="item2" />
  <div class="item3" />
  <div class="item4" />
  <div class="item5" />
</div>

.container {
  width: 600px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.item1 {
  grid-column:1 / 3;
  grid-row: 1 / 3;
  border-radius: 50%;
  border: #0F85CC solid 5px;
}
.item2 {
  grid-column:3 / 5;
  grid-row: 1 / 3;
  border-radius: 50%;
  border: #010409 solid 5px;
}
.item3 {
  grid-column:5 / 7;
  grid-row: 1 / 3;
  border-radius: 50%;
  border: #FA1F01 solid 5px;
}
.item4 {
  grid-column:2 / 4;
  grid-row: 2 / 4;
  border-radius: 50%;
  border:#FFD603 solid 5px;
}
.item5 {
  grid-column:4 / 6;
  grid-row: 2 / 4;
  border-radius: 50%;
  border: #499659 solid 5px;
}