网格项应跨行而不是列

Question

我有一个网格，其中包含7个动态大小的div，由2个块组成，应该与7个动态div网格的第2行对齐。

我主要使用它，除了网格定位为列，我希望它是行。看小提琴，1-7应该跨越顶部 https://jsfiddle.net/juzkxo20/5/

<div class='content'>
  <div class='left'></div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>1</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>2</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>3</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>4</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>5</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>6</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>7</div>
    <div class='dynamic'></div>
  </div>
  <div class='right'></div>
</div>

.content {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-auto-rows: 50px;  
  grid-gap: 10px;
grid-auto-flow: column;
}

.column-with-dynamic-content {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-column: 2 / 3;
}

.left {
  grid-column-start: 1;
  grid-row: 2 / 3 ;
}

.right {
  grid-column-end: -1;
  grid-row: 2 / 3 ;
}

/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray;  border: 1px solid gray; }

Answer 1

这是解决问题的一种方法，我刚刚学习css网格，但我认为大部分都是正确的。

你的.column-with-dynamic-content正在创建一个包含7列的模板，但是，你在这个容器中只有3个子div，它正在寻找7.你需要这个类包含包含动态div的所有7个父div。我在下面创建了一个课程给你看。

＆＃13;

＆＃13;

.content {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-auto-flow: column;
}

.column-with-dynamic-content {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.seven-children-column {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-column: 2 / 3;
}

.left {
  grid-column-start: 1;
  grid-row: 2 / 3;
}

.right {
  grid-column-end: -1;
  grid-row: 2 / 3;
}


/* just demo styles */

.left,
.right {
  border: 2px solid red;
}

.dynamic {
  background-color: lightgray;
  border: 1px solid gray;
}

＆＃13;

<div class='content'>
  <div class='left'></div>
  <div class='seven-children-column'>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>1</div>
      <div class='dynamic'></div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>2</div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>3</div>
      <div class='dynamic'></div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>4</div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>5</div>
      <div class='dynamic'></div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>6</div>
      <div class='dynamic'></div>
    </div>
    <div class='column-with-dynamic-content'>
      <div class='dynamic'>7</div>
      <div class='dynamic'></div>
    </div>
  </div>
  <div class='right'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

网格提供line-based placement，允许您定义网格项的大小和位置。

＆＃13;

＆＃13;

.content, 
.column-with-dynamic-content {
  display: grid;
  grid-auto-rows: 50px;  
  grid-gap: 10px;
}

.content > div:nth-child(1) { grid-column: 1 / 2;  grid-row: 2 / 3; }
.content > div:nth-child(2) { grid-column: 2 / 3; }
.content > div:nth-child(3) { grid-column: 3 / 4; }
.content > div:nth-child(4) { grid-column: 4 / 5; }
.content > div:nth-child(5) { grid-column: 5 / 6; }
.content > div:nth-child(6) { grid-column: 6 / 7; }
.content > div:nth-child(7) { grid-column: 7 / 8; }
.content > div:nth-child(8) { grid-column: 8 / 9; }
.content > div:nth-child(9) { grid-column: 9 / 10; grid-row: 2 / 3; }

/* just demo styles */
.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray;  border: 1px solid gray; }

＆＃13;

<div class='content'>
  <div class='left'></div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>1</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>2</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>3</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>4</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>5</div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'>6</div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'>7</div>
    <div class='dynamic'></div>
  </div>
  <div class='right'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo