CSS Grid Повтор сетки макета

Question

Я создаю повторяющуюся сетку, в которой мне нужно повторить ту же структуру, что и первые 7 элементов. Div от A до G генерирует результат, который я хочу, и все остальные элементы div располагаются в правой колонке, но только H и M (первый и шестой элементы в новой строке и) не занимают желаемой высоты.

H должно равняться высоте комбайна I и J, а M должно равняться высоте комбайна K и L, как A и F:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, [col] 1fr);
  grid-template-rows: repeat(10, [row] auto);
  grid-gap: 1em;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  display: flex;
  align-items: center;
}

.box:nth-of-type(7n+1) {
  grid-column: col / span 2;
}

.box:nth-of-type(7n+3) {
  grid-column: col 3 / span 1;
}

.box:nth-of-type(7n+4),
.box:nth-of-type(7n+5) {
  grid-column: col 1 / span 1;
}

.box:nth-child(7n+6) {
  grid-column: col 2 / span 2;
}

.box:nth-child(7n+7) {
  grid-column: col 1 / span 3;
}

.box:first-child {
  grid-row: row / span 2;
}

.box:nth-child(2) {
  grid-row: row;
}

.box:nth-child(3) {
  grid-row: row 2;
}

.box:nth-child(4) {
  grid-row: row 3;
}

.box:nth-child(5) {
  grid-row: row 4;
}

.box:nth-child(6) {
  grid-row: row 3 / span 2;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>

  <!--   items with same spans need to be repeted  -->
  <div class="box">H</div>
  <div class="box">I</div>
  <div class="box">J</div>
  <div class="box">K</div>
  <div class="box">L</div>
  <div class="box">M</div>
  <div class="box">N</div>
</div>

Answer 1

Прежде всего я упростил ваш код:

• с использованием только логики nth-child для определения размера столбца строки,

• удалено grid-template-rows и присвоение имен линиям сетки,

Проблема, с которой мы столкнулись сейчас, заключается в том, что поля E и F неуместны в строках:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: repeat(10, [row] auto); */
  grid-gap: 1em;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  display: flex;
  align-items: center;
}

.box:nth-of-type(7n+1) {
  grid-column: span 2;
  grid-row: span 2;
}

.box:nth-child(7n+6) {
  grid-column: span 2;
  grid-row: span 2;
}

.box:nth-child(7n+7) {
  grid-column: span 3;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>

  <!--   items with same spans need to be repeted  -->
  <div class="box">H</div>
  <div class="box">I</div>
  <div class="box">J</div>
  <div class="box">K</div>
  <div class="box">L</div>
  <div class="box">M</div>
  <div class="box">N</div>
</div>

Теперь вы можете сдвинуть F к последним двум столбцам, используя grid-column: 2 / 4, а затем используйте grid-auto-flow: dense, чтобы поднять его - см. Демонстрацию ниже:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /*grid-template-rows: repeat(10, [row] auto);*/
  grid-auto-flow: dense; /* fills in the spaces */
  grid-gap: 1em;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  display: flex;
  align-items: center;
}

.box:nth-of-type(7n+1) {
  grid-column: span 2;
  grid-row: span 2;
}

.box:nth-of-type(7n+5) {
  grid-column: 1;
}

.box:nth-child(7n+6) {
  grid-column: 2 / 4; /* changed */
  grid-row: span 2;
}

.box:nth-child(7n+7) {
  grid-column: span 3;
}

<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
  <div class="box">G</div>
  <!--   items with same spans need to be repeted  -->
  <div class="box">H</div>
  <div class="box">I</div>
  <div class="box">J</div>
  <div class="box">K</div>
  <div class="box">L</div>
  <div class="box">M</div>
  <div class="box">N</div>
</div>