title: Arrange elements in columns vertically shifted relative to one another
body: <p>I am looking for a way to achieve this effect:</p>
  
  <p>On the mobile layout, elements are placed one under the other in a column:</p>
  
  <p><a href="https://i.stack.imgur.com/squz9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/squz9.png" alt="enter image description here"></a></p>
  
  <p>On the desktop layout, however, elements are placed in two columns, with odd elements in one column and even elements in the other. The columns are shifted vertically relative to one another:</p>
  
  <p><a href="https://i.stack.imgur.com/jLDaL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jLDaL.png" alt="enter image description here"></a></p>
  
  <p>I wonder whether there is a CSS-only way to achieve this positioning. CSS grid comes tantalizingly close, if only there were a way to say that, for example, <code>nth-child(n+1)</code> would span rows 1 and 2, and `nth-child(2n) would span rows 2 and 3, and so on, but I am not sure whether CSS grid can do this. Do you perhaps know of a way to do this?</p>
  
  <p><strong>UPDATED:</strong> I guess this is a very rough CSS approximation of what I have in mind, using inline blocks: <a href="https://codepen.io/anon/pen/JwXVox" rel="nofollow noreferrer">https://codepen.io/anon/pen/JwXVox</a>. I would welcome a better technique.</p>