如何使用 css 网格正确格式化同一网格区域中的 2 个元素答案

【问题标题】：How to correctly format 2 elements in the same grid area using css grid如何使用 css 网格正确格式化同一网格区域中的 2 个元素
【发布时间】：2018-06-18 12:51:38
【问题描述】：

我正在动态生成元素并将它们放置在网格区域中。

网格元素的每个“单元格”都存在于一个父容器中，该容器设置了display: contents，从而可以将子元素单独放置在网格上。

这是一个预订应用程序，网格上的每个元素都有不同的grid-row-end，具体取决于其持续时间。

“单元格”父级中的所有元素都具有相同的grid-row-start

但是，当 2 个元素从同一网格行开始时，它们会重叠。

有没有办法在网格区域的上下文中格式化这些元素？

例如：

<div class="grid" style="grid-template-columns: [colHeader] 0.25fr [_Sunday] 1fr [_Monday] 1fr [_Tuesday] 1fr [_Wednesday] 1fr [_Thursday] 1fr [_Friday] 1fr [_Saturday] 1fr;   
grid-template-rows: [rowHeader] 0.5fr [_09-00] 1fr [_09-30] 1fr [_10-00] 1fr [_10-30] 1fr [_11-00] 1fr   [_11-30] 1fr [_12-00] 1fr [_12-30] 1fr [_13-00] 1fr [_13-30] 1fr [_14-00] 1fr [_14-30] 1fr [_15-00]        1fr [_15-30] 1fr [_16-00] 1fr [_16-30] 1fr [_17-00] 1fr [_17-30] 1fr;">
  
  <div class="cell" style="display: contents">
    <div style="grid-area: _16-00 / _Sunday / _17-00 / _Sunday;">
   	  activity 1
    </div>
    <div class="cell" style="grid-area: _16-00 / _Sunday / _17-30 / _Sunday;">
   	  activity 2
    </div>
  </div> 
<div>

在本例中，2 个 div.cell 具有相同的 grid-row-start 但不同的 grid-row-end 属性，因此它们重叠。

我知道这是预期的行为，但有没有办法覆盖它并强制它们不重叠。

【问题讨论】：

你有任何视觉参考，工作代码更好的解释？
我不会使用display:contents（用于不同目的）。使用父级作为网格占位符，然后使用display: flex 对齐各自父级中的元素。
@DomenikReitzner 我最初是这样做的，但我不能通过这种方法获得 2 个具有不同网格跨度的元素。
这是什么app-grid 标签？它是您正在使用的一些框架吗？这个问题没有被这样标记。
@elena 是的，它来自角度，但它与答案无关。它们可以是任何元素。我已经改变了它们

标签： css css-grid

【解决方案1】：

不，没有:) 我会尝试修复您的生成功能以使其正常工作。

【讨论】：

【解决方案2】：

没有办法防止重叠的网格元素。

我最终将每个元素的 margin-left 和 width 设置为单元格中元素数量的一小部分。

我有一半认为答案是否定的，但也许我缺少一些东西或任何技巧/黑客。

感谢您的帮助。

【讨论】：