CSS Grid - 跨行

Question

我希望将2列的网格div与第2行div放在一起（参见图表）。行总数是动态的。

 <div class='content'>
  <div class='left'></div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>    
  </div>
  <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
  </div>
    <div class='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
  </div>
  <div class='right'></div>
</div>

CSS

.content{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 100px 1em;
}

为什么我需要添加文字才能发布此问题

Answer 1

您可以使用两个网格容器来进行此布局。

主网格容器将管理左侧，中间和右侧项目。中心项目包含动态内容。

嵌套容器将管理动态内容。

＆＃13;

＆＃13;

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

.column-with-dynamic-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12%, 1fr)); /* OR...
     grid-template-columns: repeat(7, 1fr); ...which is less responsive, 
                                               but may still work for you. */
  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='column-with-dynamic-content'>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
    <div class='dynamic'></div>
  </div>
  <div class='right'></div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo