Question

我在CSS网格中发现了许多有关行跨度的问题，但找不到适合我的问题的答案。

我有一个CSS类：

.grid-container
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-rows: min-content;
    padding: 2px;
}

这个想法来自引导程序tbh，但是除ASP.NET之外，我不允许使用任何框架。

此外，我还有许多CSS类可将任何项目放置在网格内：

.grid-container .grid-item-1-3
{
    grid-column-start: 1;
    grid-column-end: 3;
}

例如，此类用于将项目从网格的最左侧扩展到两列。

我在应用程序的不同站点上使用这些类。每个站点都有不同的行数。有时必须有一些控件必须跨越多行，并且我添加了更多的类，如下所示：

.grid-container .grid-item-span-2
{
    grid-row: span 2
}

如果我仅使用grid-item-span-2类，它会很好地工作。因此，它在适合该项目的列上跨越2行。但是，如果我另外使用其他类之一将该项目放置在特定的列范围内，则该项目将从下一个空行开始并从该行开始跨越。

我尝试举一个例子：

<div class="grid-container">
  <div class="grid-item-1-7">
    <label>Text 1</label>
  </div>
  <div class="grid-item-7-13 grid-item-span-2">
    <textarea></textarea>
  </div>
  <div class="grid-item-1-7">
    <label>Text 2</label>
  </div>
</div>

如果我这样做，则网格将创建3行，将textarea放置在右侧（按预期方式），但在第二行中。如果我省略类“ grid-item-7-13”，则网格仅具有两行（按预期），并且textarea正确跨两行，但被限制在第7行和第8行之间。

好吧，我刚刚意识到，当我使用jsfiddle或作为代码段对其进行测试时，它确实可以工作：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-rows: min-content;
  padding: 2px;
}

.grid-container .grid-item-1-5 {
  grid-column-start: 1;
  grid-column-end: 5;
}

.grid-container .grid-item-1-7 {
  grid-column-start: 1;
  grid-column-end: 7;
}

.grid-container .grid-item-5-13 {
  grid-column-start: 5;
  grid-column-end: 13;
}

.grid-container .grid-item-7-13 {
  grid-column-start: 7;
  grid-column-end: 13;
}

.grid-container .grid-item-span-2 {
  grid-row: span 2;
}

textarea {
  width: 99%;
  height: 99%;
}

<div class="grid-container">
  <div class="grid-item-1-7 grid-container">
    <div class="grid-item-1-5">
      <label>Text 1</label>
    </div>
    <div class="grid-item-5-13">
      <input type="text" />
    </div>
  </div>
  <div class="grid-item-7-13 grid-item-span-2 grid-container">
    <div class="grid-item-1-5">
      <label>Text 2</label>
    </div>
    <div class="grid-item-5-13">
      <textarea></textarea>
    </div>
  </div>
  <div class="grid-item-1-7 grid-container">
    <div class="grid-item-1-5">
      <label>Text 3</label>
    </div>
    <div class="grid-item-5-13">
      <input type="text" />
    </div>
  </div>
</div>

这意味着我的问题与ASP.NET有关，对吧？

In my ASP.NET application it looks like this

Comparison of fiddle and ASP.NET style from Chrome DevTools

有人可以帮我解决这个问题吗？ ASP.NET是否可能不完全支持CSS网格？：（

非常感谢您的帮助。

ASP.NET：CSS网格行跨度

0 个答案: