title: Responsive zig zag layout using css?
body: <p>I want to create a responsive snake/zigzag layout, like so:
  <img src="https://i.stack.imgur.com/8aD7k.jpg" alt="zig zag layout starting from the middle">
  It's a path of square images and circles starting in the center of the container and going downwards.</p>
  
  <p>Number of elements is unknown and is determined by server data.</p>
  
  <p>How do I achieve this using pure css?</p>
  
  <p>Here's a possible code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="square"&gt;&lt;/div&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
    &lt;div class="square"&gt;&lt;/div&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
    &lt;div class="circle"&gt;&lt;/div&gt;
    &lt;div class="square"&gt;&lt;/div&gt;
  /&lt;div&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/rwYjmJ?editors=1100#0" rel="nofollow noreferrer">Full Codepen</a></p>