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>

Answer 2

Here is another approach you could look at :

HTML

<div class="wrapper">
  <div class="float-right"></div>
  <div class="float-left"></div>
  <div class="float-right"></div>
  <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 class="dot">Element 7</div>
  <div class="dot">Element 8</div>
  <div class="dot">Element 9</div>
  <div class="dot">Element 10</div>
  <div class="dot">Element 11</div>
  <div class="dot">Element 12</div>
</div>

CSS

wrapper {
  width: 100%;
}
.dot {
  width: 150px;
  height: 150px;
  margin: 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: #999;
}

.float-left, .float-right {
  border: doted blue 1px; /* temporary */
  width: 100px;
  height: 180px;
}
.float-left {
  float: left;
  clear: right;
}
.float-right {
  float: right;
  clear: left;
}

Instead of trying to put margin on some elements, you create floating "obstacles" in the page to move the dots on the left or right.

You can display as many floating divs as you need, but the thing is you must hide them when using smaller screen resolution, when they become "dot-less" on the bottom of the page. I think you can manage that with media queries or bootstrap classes, conditionning the number of floating divs with the screen resolution.

Answer 3

Okay that took me some thinking, but i think i got something rather acceptable, it will work in every enviorment, page size and any number of dots.

It altough has one limitation! You have to fix the number of dots per row.

Let's see, i choose to use 9 dots on a full row, making it really easy to calculate, as you have to split your width into whatever amount of dots you choose + 1, as there is always a half dot's width space on either the left or right side.

HTML:

You'll repeat blocks of this codes:

  <div class="container">
      <div class="dummy"></div>
      <div class="element">
      </div>
  </div>

With a really smart trick by Nathan Ryan you can now choose your elements to be any width and their height will adapt.

CSS:

Now comes a bit of calculating (you could use less or sass to calculate this dynamically and change the number of dots per row). I'll comment in the code to make understanding what these properties do.

.container {
    display: inline-block;
    position: relative;
    /* As i want to calculate for 10 dots i have to make a dot + margin take up
    exactly 10% of the document's width, here i chose a 3/4 ratio per dot*/
    width: 7.5%;    
    margin-right: 2.5%;
}


/* Here you have to choose every (rowLength)*2 and add 1 or (rowLength) + 1, 
depending which line you want your offset to start */
.wrapper .container:nth-child(18n+10) {  
    /* And finally align it half of a dot's complete size*/
    margin-left: 5%;
}
.dummy {
    margin-top: 100%;
}
.element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    display: inline-block;
    background-color: #f1ea75;
}

You can check it out here.

..and yeah i know, the bears are awesome! (ง⚆ᴥ⚆)ง