Question

我有一个Angular 2应用，在一个组件中有一个嵌套的网格。一个带有标题的主网格，每一行是另一个网格，由* ngFor添加，我不知道会得到多少行。

如果满足特定情况，我想跨行包含一些块而不是行。

CSS：

.grid {
  display: grid;
  width: 80px;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 20px;
} 
.h-item1 {
    grid-column: 1;
    background-color: red;
  }
.h-item2 { 
    grid-column: 2;
    grid-row: 1;
    background-color: pink;
  }
.h-item3 {
    grid-column: 3;
    grid-row: 1;
    background-color: violet;
  } 

.sub-grid {
    display: grid;
    grid-column: 1 / span 3;
    height: 30px;
    width: 80px;
    grid-template-areas: 'item1 item2 item3';
    grid-template-columns: 100px 100px 100px;

  }
  .item1 {
    grid-area: item1;
    background-color: lime;
  }

  .item2 {
    grid-area: item2;
    background-color: yellow;
  }

  .item3 {
    grid-area: item3;
    background-color: blue; 
  }

HTML：

<div class="grid">
  <div class="h-item1">1</div>
  <div class="h-item2">2</div>
  <div class="h-item3">3</div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div>
  <div class="sub-grid">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
  </div> 
</div>

有关网格外观的代码笔在这里：

https://codepen.io/anon/pen/dgKwxr

例如，我希望黄色列跨越前两行，然后从第三行到末尾。使用这种网格用法，有什么方法可以做到这一点？

最后，网格应如下所示：

header1 header2 header2
sub1    sub2    sub3
sub1            sub3
sub1    sub2    sub3 
sub1            sub3 
sub1            sub3
sub1            sub3

sub2所在的地方。

嵌套CSS网格上的行跨度

0 个答案: