Положение круга не может быть установлено

Question

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 80px);
  grid-gap: 10px;
  margin: auto 0;

}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 80px);

  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 80px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 80px);
  }
}

.container .box {
  width: 100%;

}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;

}

.container .box .chart {

  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 120px;
  height: 80px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

$(function() {
  $('.chart').easyPieChart({
    size: 80,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});

Я хочу сделать круг ближе, но вроде не получается. Я просто пробую все на этом CSS и вроде ничего не работает. Кто-нибудь знает, как это решить? что мне изменить, чтобы круг стал ближе? Для промежутка между кругами A и B и C и D.

UPDATE размеры js и css уже были изменены, но линия шире, какое решение?

Answer 1

Просто измените свой стиль на .container правило grid-gap вот так (например, я изменил его на 30px)

$(function() {
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 160px);
  /* Use this rule to control the space between the circles for example I changed it to 30px*/
  grid-gap: 30px;
  margin: auto 0;
}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 160px);
  }
}

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

<div class="container">
  <div class="box">
    <div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>
    <h2>Html</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="90" data-scale-color="#ffb400">90%</div>
    <h2>Css</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="85" data-scale-color="#ffb400">85%</div>
    <h2>Javascript</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="95" data-scale-color="#ffb400">95%</div>
    <h2>Photoshop</h2>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>