Question

我正在将有效的CSS设计集成到我的angular应用程序中。该设计非常成功地使用了网格和网格列，如下所示：

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 36px 20px;
    margin: 0;
}

.single {
    width: auto;
    border: 1px solid #000;
}

.double {
    grid-column: 2 / span 2;
    border: 1px solid #000;
}

<div class="grid">
    <div class="single">a</div>
    <div class="double">b</div>
</div>

我的问题是这将进入Angular应用程序，默认情况下Angular最终会在组件的页面上放置标签，这会中断HTML。所以我的实际HTMl看起来像这样（跨度是Angular为我的组件插入的标签的占位符）：

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 36px 20px;
    margin: 0;
}

.single {
    width: auto;
    border: 1px solid #000;
}

.double {
    grid-column: 2 / span 2;
    border: 1px solid #000;
}

<div class="grid">
    <span>
        <span>
            <div class="single">a</div>
        </span>
    </span>
    <span>
        <span>
            <div class="double">b</div>
        </span>
    </span>
</div>

现在我知道我可以通过对角度进行调整来解决此问题，这是我通常要做的-转换组件以使用属性选择器，以便它们可以直接进入普通标签，并在可能的情况下使用ng-container，应用宿主CSS规则等...

但是，所有其他CSS的设计方式都使其不介意树上悬挂一些额外的标签，因此，为了保持事物的一致性，我想知道是否有办法为此，可以无需调整我的代码结构。但是我对这些CSS指令不是很熟悉，而且我自己也没有做到。因此，我来这里问：

是否有一种方法可以告诉CSS网格/网格列属性有效地忽略DOM树中某些额外标签的存在？

Answer 1

将样式应用于直接子对象，它将始终在带有或不带有额外标签的情况下起作用：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 36px 20px;
  margin: 0;
}

.grid> :first-child {
  width: auto;
  border: 1px solid #000;
}

.grid> :last-child {
  grid-column: 2 / span 2;
  border: 1px solid #000;
}

<div class="grid">
  <span>
        <span>
            <div class="single">a</div>
        </span>
  </span>
  <span>
        <span>
            <div class="double">b</div>
        </span>
  </span>
</div>
<div class="grid">
  <div class="single">a</div>

  <div class="double">b</div>

</div>

或者如果您想忽略某些标签，请使用display:contents。只需注意支持：https://caniuse.com/#feat=css-display-contents

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 36px 20px;
  margin: 0;
}

.single {
  width: auto;
  border: 1px solid #000;
}

.double {
  grid-column: 2 / span 2;
  border: 1px solid #000;
}
.grid span {
  display:contents;
}

<div class="grid">
  <span>
        <span>
            <div class="single">a</div>
        </span>
  </span>
  <span>
        <span>
            <div class="double">b</div>
        </span>
  </span>
</div>
<div class="grid">
  <div class="single">a</div>

  <div class="double">b</div>

</div>

Answer 2

您可以尝试使用grid-area属性来更好地控制将哪些元素理解为网格的一部分。

Here's a fiddle you can try

在距离树更远的地方获取网格列

是否有一种方法可以告诉CSS网格/网格列属性有效地忽略DOM树中某些额外标签的存在？

2 个答案: