Выбор начального столбца и строки для ряда элементов сетки

Question

Если у меня есть это ниже, все данные будут перекрываться , потому что Я сказал ему перейти в один и тот же столбец и строки. Как я могу сделать так, чтобы он начинался с нужного столбца и строки, и он "рос"?

Если я удаляю строку, она идет вниз по странице, как и ожидалось. Но что, если я хочу, чтобы это началось в строке 1/3, 5/12 и т. Д.? Вы можете сделать это?

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

Answer 1

Вы можете установить этот стиль только для первого содержимого

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

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

.content:first-child {
  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>

Answer 2

Я не думаю, что есть чистое решение CSS Grid для такого поведения, но все еще есть чистое и простое решение CSS.

Используйте псевдоэлемент.

В макете сетки (как в макете флекс) псевдоэлементы на контейнере считаются элементами. Поэтому вставьте псевдо, который будет охватывать пустые строки.

В приведенном ниже примере элементы контента начинаются со строки 6. Не нужно изменять правило столбца.

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

.mygrid::before {
  content: "";
  grid-row: 1 / span 5;
  grid-column: col-start 4 / span 7;
}

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