很难拿出好标题-一定要改变。
传统上，元素上的margin可用于在页面上相对于其先前元素移动元素。因此，如果我在页面上有一列div作为列，则可以通过设置元素的top-margin CSS属性在其中垂直移动元素。
这在动态页面中很方便，在动态页面中，根据给定条件某些元素可能不存在，例如，此处的一个非常简单的示例：
https://jsfiddle.net/jhartnoll/4s6pcLu0/1/
我已经简单地定义了一个带有div元素的列，并放置了另外两个div元素，并使其中一个元素与其前身之间有2em的垂直间隙。
如果删除（或设置Display：none）元素#one，则元素#two会在列上移，并从列顶部移2em，而不是元素{{1}处2em }，不再存在。
但是，如果我尝试使用CSS网格执行类似的操作，从而使DOM树更简单，更灵活，则会遇到问题：
https://jsfiddle.net/jhartnoll/xvhycg0k/11/
在这种情况下，列是由CSS网格设置的，因此是伪列的一种，但是当我将元素设置为具有#one时，边距是从网格列的顶部计算的，而不是相对于前身元素。
因此，如果不存在元素margin-top: 2em，则#one仅从顶部向下2em，从而在...上留下一个间隙
此行为使#two无效，因为它在相对定位的元素上可以与margin-top完全互换。
这是CSS Grid的错误，还是我使用的错误，还是有解决办法？
CSS Grid看起来很棒，但是我遇到了类似这样的问题，其中涉及到动态内容，如果元素的高度可能可变或根本不存在，则Grid会使其他元素漂浮在空间中，无法移动上。
编辑以明确动态问题
感谢到目前为止的评论。问题不在于使用布局，我了解如何设置网格和行，定义大小，空间，跨度等，问题在于动态内容。
假设我有一个非常简单的产品页面： https://jsfiddle.net/jhartnoll/xvhycg0k/42/
与网格间距，行/列大小等无关，其概念仅仅是我在产品标题上方插入了“价格降低10％”的初始元素。
自然，产品页面将使用模板，因此HTML和CSS应该固定且足够灵活以使元素丢失或存在。
并非所有产品页面都会显示10％的折扣，因此，在那些页面上，我希望产品标题升至顶部元素位置。
据我所知，这无法通过网格实现。
类似地，如果有一个top包含产品说明，并且在产品说明下方有一些产品交叉促销或其他内容，则说明的长度可能是可变的，因此以div作为列示例我的原始问题是，内容将自动扩展描述网格并将交叉促销的内容向下移动到页面上。再说一遍，用网格无法做到这一点？
因此，我正在使用仅定义列且仅每页一行的网格，以便将内容像原来的div一样以列的形式堆叠在列中，但是后来我遇到了这个问题在网格内的div问题是margin-top相对于网格顶部，而不是相对于上面的元素。
因此，我找不到使用模板设计创建动态网站的方法，该模板设计允许使用Grid使用条件元素和可变元素尺寸，而不使用Javascript在页面加载时进行操作。
在我看来，应该为margin-top属性提供一个选项，以允许元素在内容太大的情况下向下跳行，或者在没有任何阻碍的情况下向上跳...无论如何！
答案 0 :(得分：0)
嘿，请尝试以下代码，它将满足您的要求！
#column{display:grid;grid-row-gap: 10px;width:4em;height:auto;border:1px solid grey;}
#one{background:red;width:2em ; height:2em}
#two{background:blue;width:2em ; height:2em}<div>
<div id="column">
<div id="one">
</div>
<div id="two">
</div>
</div>
</div>