Как вы размещаете элементы в новую строку, тот же столбец с CSS-сеткой?

Question

Мой контент перекрывается. Я понимаю, что это потому, что я поставил тот же col-start, но как мне заставить div содержимого расти и опускаться в середине моей css-сетки? Должен ли я использовать flexbox с сеткой здесь? (пожалуйста, без Bootstrap)

Вот как это выглядит сейчас:

.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, но он должен начинаться с этого столбца и охватывать столько столбцов.

Answer 1

Вы специально указали всем элементам занимать один и тот же ряд (grid-row: 1 / 3). Почему бы не удалить это правило?

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