title: Elements in CSS Grid Column, top margin behaves as position top
body: <p>Difficult to come up with a good title - by all means, change if you can.</p>
  
  <p>Traditionally, a <code>margin</code> on an element can be used to move elements around a page relative to its previous elements. So, if I had a <code>div</code> as a column on my page I could shift elements vertically within that by setting their <code>top-margin</code> CSS property.</p>
  
  <p>This is handy in dynamic pages where some elements might not exist according to given condition, eg, a very simple example here:</p>
  
  <p><a href="https://jsfiddle.net/jhartnoll/4s6pcLu0/1/" rel="nofollow noreferrer">https://jsfiddle.net/jhartnoll/4s6pcLu0/1/</a></p>
  
  <p>I have simply defined a column with a <code>div</code> element, positioned two other <code>div</code> elements and made one of them have a 2em vertical gap between it and its predecessor.</p>
  
  <p>If you remove (or set Display:none) element <code>#one</code> then element <code>#two</code> is shifted up the column and positioned 2em from the top of the column, rather than 2em from element <code>#one</code> which is no longer there.</p>
  
  <p>However, if I try to do a similar thing using a CSS grid, thus making the DOM tree simpler and more flexible, I run into a problem:</p>
  
  <p><a href="https://jsfiddle.net/jhartnoll/xvhycg0k/11/" rel="nofollow noreferrer">https://jsfiddle.net/jhartnoll/xvhycg0k/11/</a></p>
  
  <p>In this case, the columns are set by the CSS grid so are sort of pseudo columns, but when I set my elements to have <code>margin-top: 2em</code> the margin is calculated from the top of the grid column, not relative to a predecessor element.</p>
  
  <p>Therefore, if element <code>#one</code> is not present, <code>#two</code> simply remains 2em down from the top leaving a gap above... </p>
  
  <p>This behaviour renders <code>margin-top</code> useless, because it is exactly interchangeable with <code>top</code> on relative positioned elements.</p>
  
  <p>Is this a bug with CSS Grid, or am I using it wrong, or is there a way around this?</p>
  
  <p>CSS Grid seems great, but I have run into several problems like this where dynamic content is concerned, if elements have potentially variable heights, or may not be there at all, the Grid leaves other elements floating in space, unable to shift up.</p>
  
  <p><strong>EDIT for clarity of the dynamic problem</strong></p>
  
  <p>Thanks for the comments so far. The problem is not with using the layout, I understand how to set up grids, and rows, define sizes, spaces, span etc, the problem is with dynamic content.</p>
  
  <p>Supposing I have an extremely simple product page:
  <a href="https://jsfiddle.net/jhartnoll/xvhycg0k/42/" rel="nofollow noreferrer">https://jsfiddle.net/jhartnoll/xvhycg0k/42/</a></p>
  
  <p>Irrespective of the grid spacing, row/column size etc, the concept is simply that I have thrown in a "Price reduced by 10%" splash element above the product title.</p>
  
  <p>Naturally, product pages would be using templates and therefore the HTML and CSS should be fixed and flexible enough to enable elements to be missing or present.</p>
  
  <p>Not all product pages will display the 10% off deal, so on those pages, I would want the Product Title to shift up into the top element position.</p>
  
  <p>This, as far as I can tell, cannot be achieved with grids.</p>
  
  <p>Similarly, if there was a <code>div</code> which contained a product description and underneath it some product cross promotion or something, the description might be of variable length, so with the <code>div</code> as a column example in the my original question, the content would automatically expand the description grid and shift the cross promotion stuff down the page. Again, this can't be achieved with grids?</p>
  
  <p>So, I was messing around with using a grid defining columns only and simply one row per page so that content could be stacked in columns similarly to the original <code>div</code> as a column example, but then I ran into this <code>margin-top</code> problem which, within a Grid is that <code>margin-top</code> is relative to the grid top, not to the elements above. </p>
  
  <p>So I can't find a way of creating a dynamic website, using a template design which allows for conditional elements and variable element dimensions using Grid and without using Javascript to manipulate on page load.</p>
  
  <p>In my mind, there should be an option for a <code>row-shift</code> property to allow elements to jump down a row if the content is too large, or jump up if there is nothing obstructing it... or something like that anyway!</p>