Question

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

网格元素的每个“单元格”都位于父容器中，该容器设置了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属性，因此它们重叠。

我理解这是预期的行为，但有没有办法覆盖它并迫使它们不重叠。

Answer 1

不，没有:)我会尝试修复你的生成功能才能正常工作。

Answer 2

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

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

我有一半的期望答案是否定的，但也许有些东西我不知道或有任何诡计/黑客攻击。

感谢您的帮助。

如何使用css网格

2 个答案: