Offset every nth row inside a responsive layout

Question

There is a pattern I'd like to rebuild in HTML and CSS only:

As I imagined it I'd need to have a collection of elements (here displayed as dots) which are lined up next to each other and which have a specific margin. I can then try to add a larger margin to every nth instance of a dot, which starts a new row, to offset the row which it is located in. I created an example here:

wrapper {
  width: 100%;
}
.dot {
  width: 150px;
  height: 150px;
  margin: 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: #999;
}
.wrapper .dot:nth-child(4n) {
  margin-left: 100px;
  background-color: #dd77dd;
}

<div class="wrapper">
  <div class="dot">Element 1</div>
  <div class="dot">Element 2</div>
  <div class="dot">Element 3</div>
  <div class="dot">Element 4</div>
  <div class="dot">Element 5</div>
  <div class="dot">Element 6</div>
</div>

You can also edit it in this fiddle: https://jsfiddle.net/jessicajordan/j8238oo6/8/

This setup works completely fine for a fixed width layout, e.g. when the .wrapper container, in which the dot elements are contained is of a predefined and fixed width. However, I want to make the container width responsive (e.g. set it to 100% width and make its width adjustable by viewport size), which means that the rows of dots can contain a varying number of dot elements depending on the flexible size of the .wrapper container. Therefore the dot element that starts a new row and which is supposed to add an offset to it by using a bigger margin than the other dots, will be a different one each time the .wrapper container size changes.

If it is doable in HTML + CSS alone: How can I add an offset to every 2nd row of elements and preserve this layout across different container sizes? Just mentioning: the dot elements themselves should have a fixed width and should not scale in size with the .wrapper container.

Answer 1

One way you can offset every odd row with CSS only and without media queries is to use the shape-outside property.
Please note that this property is candidate recomendation and therefore has low browser support.

Here is an example that supports up to 5 rows :

.wrapper {
  width: 100%;
}
.wrapper div {
  width: 50px;
  height: 50px;
  margin: 50px;
  border-radius: 50%;
  display: inline-block;
  background-color: #000;
  text-align: center;
}
.wrapper:before {
  content: '';
  float: left;
  width: 75px;
  height: 9999px;
  -webkit-shape-outside: polygon(0px 150px, 75px 150px, 75px 300px, 0 300px, 0px 450px, 75px 450px, 75px 600px, 0px 600px);
  shape-outside: polygon(0px 150px, 75px 150px, 75px 300px, 0 300px, 0px 450px, 75px 450px, 75px 600px, 0px 600px);
}

<div class="wrapper">
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
  <div></div><div></div><div></div><div></div><div></div>
</div>