Html 网格项应跨行流动，而不是跨列流动

我有一个网格，包含7个动态大小的div，周围有2个块，应该与7个动态div网格的第二行对齐

我让它大部分工作，除了网格定位为列，我希望它是行。看小提琴，1-7应该穿过顶部

1.
2.
3.
4.
5.
6.
7.
.内容{
显示：网格；
网格模板柱：1fr 7fr 1fr；
网格自动行：50px；
栅隙：10px；
网格自动流：列；
}
.具有动态内容的列{
显示：网格；
网格模板列：重复（7，1fr）；
网格自动行：50px；
栅隙：10px；
网格柱：2/3；
}
.左{
网格列开始：1；
网格行：2/3；
}
.对{
网格柱端：-1；
网格行：2/3；
}
/*只是演示风格*/
.left、.right{边框：2px实心红色；}
.dynamic{背景色：浅灰色；边框：1px纯灰；}

这里有一种方法可以解决您的问题，我刚刚学习css网格，但我认为大多数方法都是正确的

您是。column with dynamic content正在创建一个包含7列的模板，但是，您在此容器中只有3个子div，它正在查找7。您需要这个类来包含所有7个包含动态div的父div。我在下面创建了一个类来向您展示

.content{
显示：网格；
网格模板柱：1fr 7fr 1fr；
网格自动行：50px；
栅隙：10px；
网格自动流：列；
}
.具有动态内容的列{
显示：网格；
网格自动行：50px；
栅隙：10px；
}
.七个孩子专栏{
显示：网格；
网格模板列：重复（7，1fr）；
网格自动行：50px；
栅隙：10px；
网格柱：2/3；
}
.左{
网格列开始：1；
网格行：2/3；
}
.对{
网格柱端：-1；
网格行：2/3；
}
/*只是演示风格*/
左边
.对{
边框：2倍纯红；
}
.动态{
背景颜色：浅灰色；
边框：1px纯色灰色；
}

1.
2.
3.
4.
5.
6.
7.

网格提供，允许您定义网格项的大小和位置

.content，
.具有动态内容的列{
显示：网格；
网格自动行：50px；
栅隙：10px；
}
.content>div:n子（1）{网格列：1/2；网格行：2/3；}
.content>div:n子（2）{网格列：2/3；}
.content>div:n子（3）{网格列：3/4；}
.content>div:n子（4）{网格列：4/5；}
.content>div:n子（5）{网格列：5/6；}
.content>div:n子（6）{网格列：6/7；}
.content>div:n子（7）{网格列：7/8；}
.content>div:n子（8）{网格列：8/9；}
.content>div:n子（9）{网格列：9/10；网格行：2/3；}
/*只是演示风格*/
.left、.right{边框：2px实心红色；}
.dynamic{背景色：浅灰色；边框：1px纯灰；}

1.
2.
3.
4.
5.
6.
7.

这很接近，但由于某些原因，.content div仅与第二行（110px）一样高，因此看不到下面的内容。容器div仅扩展到第二行…有意义吗？是的，因为容器的设置为内容高度。您想要视口高度吗？我原以为它会发展到动态div的高度。我需要了解更多关于您试图完成的任务的细节，以便进一步修改解决方案。但是发生了这样的事情：主容器（

.content

）创建了两行。第一个自然行。第二行是通过在第二行上放置边缘框创建的。嵌套容器（

.column with dynamic content

）仅存在于主容器的第一行和第二行中。一旦嵌套容器有两个以上的项，它就会溢出主容器。这就是这个答案的由来。再一次，有了关于你的总体目标的更多细节，也许一个不同的解决方案是可能的。

<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; }