title: Indent even rows of hexagons in CSS
body: <p>I currently have a list of hexagons (images) that I have wrap to the next line when the browser width decreases. However, when this happens, they form even lines as seen in the first image, each starting at the same point on the x axis. </p>
  
  <p><img src="https://i.stack.imgur.com/SfHvJ.png" alt="Current solution where each row starts at the same point on the x axis"></p>
  
  <p><a href="http://jsfiddle.net/y9r7tu6k/" rel="nofollow noreferrer">Here is the JS Fiddle</a> (albeit, the hexes don't flow right because they aren't images). The real code for this is:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;span&gt;
          &lt;img class="hex" src="img/hex.png"&gt;
      &lt;/span&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS is:</p>
  
  <pre><code>.container {
      padding-top: 80px;
      width: 50%;
      margin-left: auto;
      margin-right: auto;
  }
  
  .container span {
      line-height: 129px;
      display: inline-block;
  }
  
  .container .hex {
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>What I would like to do is alternate the rows such that every other row starts at an offset of the hexagon size as seen in figure two. It should also be noted that this example also has a negative y position relative to the respective position as determined from the first image.<img src="https://i.stack.imgur.com/Udkyk.png" alt="hexagon rows interlocking, with an offset for even rows"> </p>
  
  <p>Is there a way to do this with just CSS? I'd like to avoid using a library if at all possible.</p>
  
  <p>This is similar to the question asked <a href="https://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3">here</a>, but I need the entire structure to be able to have an undetermined number of rows, so the solution where I specify which items are in which rows isn't feasible for my application.</p>