CSS to layout a list of items in an evenly distributed grid

Question

Using CSS, how can I arrange a list of items in a circular-ish look like this automatically based on the number of items in it. I want to evenly distribute the items and make it as proportional as possible. Is there an easy way to do it? Currently I am using the following settings to put stack them together and the remaining ones will be at the end in the center but I want to achieve this circular ish look if possible.

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

score 2 · Answer 1 · answered Aug 02 '21 at 19:34

shape-outside can approximate this but you will have to manually adjust the size. I will rely on 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>

CSS to layout a list of items in an evenly distributed grid

1 Answers1