如何将元素放在与CSS网格相同的新行和同一列上？ [英] How do you place elements on a new row, same column with css-grid?

问题描述

我的内容重叠。我了解这是因为我放置了相同的 col-start ，但是如何使内容div增长并下降到CSS网格的中间？我应该在这里将flexbox与网格一起使用吗？ （请不要使用Bootstrap）

My content is overlapping. I understand it is because I put the same col-start, but how do I get the content divs to go grow and go down the middle of my css-grid? Should I be using flexbox with the grid here? (no Bootstrap please)

这是现在的样子：

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}

.content {
  grid-column: col-start 4 / span 7;
  grid-row: 1 / 3;
}

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

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

我希望内容div在每个新div的行中都向下，但是它需要从该列开始并跨越那么多列。

I wanted a the content divs to go down the rows each new div, but it needs to start at that column and span that many columns.

推荐答案

您已明确告诉所有项目占用同一行（网格行：1/3 ）。为什么不删除该规则？

You have specifically told all items to occupy the same row (grid-row: 1 / 3). Why not remove that rule?

.mygrid {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
  border: 5px solid red;
}
.content {
  grid-column: col-start 4 / span 7;
  /* grid-row: 1 / 3; */
}

<div class="mygrid">
  <div class="content">test1</div>
  <div class="content">test2</div>
  <div class="content">test3</div>
  <div class="content">test41</div>
  <div class="content">test51</div>
</div>

这篇关于如何将元素放在与CSS网格相同的新行和同一列上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！