CSS 在均匀分布的网格中布局项目列表

Question

使用 CSS，我如何根据其中的项目数自动排列一个圆形的项目列表，看起来像这样。我想平均分配项目并使其尽可能成比例。有没有简单的方法来做到这一点？目前我正在使用以下设置将它们堆叠在一起，其余的将位于中心的最后，但如果可能的话，我想实现这种圆形的外观。

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

Answer 1

shape-outside 可以近似于此，但您必须手动调整大小。我会靠my previous code

div.box {
  --s:150px;  /*Size of the circle */

  text-align:justify;
  height: var(--s);
  width: var(--s);
  border-radius: 50%;
}

.box >div {
  height:100%;
}

.box:before,
.box >div:before {
  content: '';
  float: left;
  height:100%;
  width: 50%;
  shape-outside: radial-gradient(farthest-side at var(--d,right), transparent 100%, red 0);
}

.box >div:before {
  float: right;
  --d:left;
}

img {
 border-radius:50%;
}

div.box {
  background: #333;
  color:#fff;
  display:inline-block;
  vertical-align:middle;
  margin:5px;
  font-size:20px;
}

<div class="box" style="--s:185px;">
 <div> 
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 </div>
</div>

<div class="box" style="--s:280px;">
 <div>
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 <img src="https://picsum.photos/id/1069/40/40">
 </div>
</div>