CSS 网格 - 跨行

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

为什么我需要添加文字才能post这个问题

Answer 1

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

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

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

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

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

CSS 网格 - 跨行

CSS Grid - span rows

html

css

css-grid

jsFiddle demo