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>