How do you place elements on a new row, same column with css-grid?

问题

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)

Here is what it looks like now:

.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

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:

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>

来源：https://stackoverflow.com/questions/50108173/how-do-you-place-elements-on-a-new-row-same-column-with-css-grid

标签

html

css

css3

flexbox

css-grid